我想制作一个组件，当鼠标悬停在图像上方时，该组件会显示文本框。
以下是HTML模板。
<section class="item-container" v-for="(item, index) in items">
<div class="image-box" @mouseenter="changeStatus(index)">
<img class="image" src="item.link" alt>
</div>
<div class="text-box" @mouseleave="changeStatus(index)" v-if="show[index]">
<h4>{{ item.name }}</h4>
<p>{{ item.content }}</p>
</div>
</section>
下面是app.js
new Vue({
el: '#app',
data: {
show: [false, false, false],
items: [
{
name: 'Author 1',
content: 'Content 1'
},
{
name: 'Author 2',
content: 'Content 2'
},
{
name: 'Author 3',
content: 'Content 3'
}
]
},
methods: {
changeStatus: function(index) {
this.show[index] = !this.show[index];
console.log(this.show);
console.log(this.show[index]); // console gets it as expected
}
}
});
当我执行以上代码时，我可以发现show属性已更改。但是，v-if不会更新。我们不能对v-if使用array [index]还是有其他原因？
您可以使用JS 对象而不是数组来获得相同的效果。换句话说，替换
show: [false, false, false],用show: {0:false, 1:false, 2:false},。