-
|
以下尝试中:
这种情况只能放弃gap吗? <template page>
<h1>0</h1>
<div style="margin: 10px;">
<x-fill :value="list">
<span style="border: 1px solid;">{{$data}}</span>
</x-fill>
</div>
<h1>1</h1>
<div style="margin: 10px;">
<x-fill :value="list" name="Items"></x-fill>
</div>
<template name="Items">
<div style="display: inline;">
<x-if :value="$host.indexs.includes($index)">
<span style="border: 1px solid;">{{$data}}</span>
</x-if>
</div>
</template>
<h1>2</h1>
<div style="display: flex;gap: 10px;margin: 10px;">
<x-fill :value="list" name="Items1"></x-fill>
</div>
<template name="Items1">
<div style="display: inline;">
<x-if :value="$host.indexs.includes($index)">
<span style="border: 1px solid;">{{$data}}</span>
</x-if>
</div>
</template>
<h1>3</h1>
<div style="display: flex;gap: 10px;margin: 10px;">
<x-fill :value="list" name="Items2"></x-fill>
</div>
<template name="Items2">
<x-if :value="$host.indexs.includes($index)">
<span style="border: 1px solid;">{{$data}}</span>
</x-if>
</template>
<h1>4</h1>
<div style="display: flex;margin: 10px;">
<x-fill :value="list" name="Items3"></x-fill>
</div>
<template name="Items3">
<div style="display: inline;">
<x-if :value="$host.indexs.includes($index)">
<span style="margin: 10px;border: 1px solid;">{{$data}}</span>
</x-if>
</div>
</template>
<script>
export default ({ query }) => {
return {
data: {
indexs: [1, 2, 3, 5, 8, 13, 21, 34, 55],
list: [],
},
ready() {
for (let i = 0; i < 60; i++) {
this.list.push(`Item ${i}`);
}
},
};
};
</script>
</template> |
Beta Was this translation helpful? Give feedback.
Answered by
kirakiray
Nov 15, 2025
Replies: 1 comment
-
|
可以用div嵌套,搭配 display:contents 使用试试: <template name="Items2">
<div style="display: contents">
<x-if :value="$host.indexs.includes($index)">
<span style="border: 1px solid">{{$data}}</span>
</x-if>
</div>
</template> |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
cyb233
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
可以用div嵌套,搭配 display:contents 使用试试: