vue3怎么把v-for里面的值循环到v-show上面,附上完整代码,并且含有script
时间: 2023-07-04 17:13:11 浏览: 45
在 Vue 3 中,可以使用 `v-for` 指令来循环渲染数据,使用 `v-show` 指令来判断元素是否显示。要将 `v-for` 循环出来的值绑定到 `v-show` 指令上,可以使用以下语法:
```
<template>
<div>
<div v-for="(item, index) in items" :key="index">
<div v-show="item.visible">{{ item.name }}</div>
</div>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
setup() {
const items = reactive([
{ name: 'item1', visible: true },
{ name: 'item2', visible: false },
{ name: 'item3', visible: true },
])
return {
items,
}
},
}
</script>
```
在上面的例子中,我们使用 `reactive` 函数创建了一个响应式的 `items` 数组,并在模板中使用 `v-for` 遍历数组中的每个元素。在每个元素中,我们使用 `v-show` 指令来判断元素是否显示,根据每个元素的 `visible` 属性来控制元素的显示和隐藏。
注意,在 Vue 3 中,需要使用 `setup` 函数来组织代码,并且不需要再像 Vue 2 中一样使用 `data` 属性来声明数据。