Vue中v-show布尔值使用数组绑定无法监听问题
在Vue中,v-show可以用于控制元素的显隐, 今天在手写一个下拉菜单,需要用v-show绑定一个数组,发现不能直接使用数组下标控制false or true,后来使用分成一个对象,使用键值对控制就没问题。<template><div><ul><li v-for="(item,index)
·
在Vue中,v-show可以用于控制元素的显隐, 今天在手写一个下拉菜单,需要用v-show绑定一个数组,发现不能直接使用数组下标控制false or true,后来使用分成一个对象,使用键值对控制就没问题。
<template>
<div>
<ul>
<li v-for="(item,index) in lists">
<p>
<span v-show="switchName[index].cut">{{item}}</span>
<button @click="toggle(index)">切换显隐</button>
</p>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
lists: ["Text1", "Text2", "Text3", "Text4", "Text5"],
switchName: [
{
cut: false
},
{
cut: true
},
{
cut: false
},
{
cut: true
},
{
cut: false
}
]
};
},
methods: {
toggle(index){
this.switchName[index].cut = !this.switchName[index].cut;
}
}
};
</script>
<style>
</style>
Vue.js v-show不能监听到通过下标控制数组里的Boolean值变化,可以使用对象通过键值对更改Boolean的值。
更多推荐
已为社区贡献8条内容
所有评论(0)