vue显示/隐藏元素的相关问题，数组已经改变但是对应的元素却没有隐藏?
问题：
点击按钮后发现console面板中arr的值已经改变了，为什么对应的列表没有隐藏呢？
要实现的功能：
点击按钮，相应的列表会隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue测试</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="box">
<button @click="show(0)">按钮一</button>
<button @click="show(1)">按钮二</button>
<button @click="show(2)">按钮三</button>
<ul>
<li v-show="arr[0]">11</li>
<li v-show="arr[1]">22</li>
<li v-show="arr[2]">33</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
arr:[true,true,true]
},
methods:{
show:function(num){
this.arr[num]=false;
console.log(this.arr);
}
}
})
</script>
</body>
</html>
HUX布斯1回答
随时随地看视频慕课网APP
相关分类
JavaScript