在使用vue的时候遇到了修改数据后,页面内容没有变化
<tr class="tr-second">
<td class="td-left">
<input type="text" v-model="tempName">
</td>
<td class="td-right" v-for="(item, index) in tempSelect" @click="changeSelect(index)">
<!--判断是T还是F-->
<div v-if="item">√</div>
<div v-else>×</div>
</td>
</tr>
data: funciton(){
return {
tempSelect: [true, true, false, true]
}
},
methods:{
changeSelect(index){
this.tempSelect[index] = !this.tempSelect[index]
}
}
其中tempSelect是一个数组,里面为true或者false,例如[true, true, false, true]
changeSelect的作用是把对应点击的值取反
比如上面的5555这一行,右侧的td都是绑定了click事件的,点击了以后用vue开发者工具看还需要手动按一下刷新才能看得到tempSelect中的值发生了变化,而且页面中还是不变(√和×么有切换)
但是改变一下input的值,√和X的显示立马切换到正确的值
这是为什么呢?
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…