vue.js - v-for 里面的DIV 点击时 只是被点击的（index ）改变状态。

问题描述

问 题

这是V-FOR里面的语句。。

点击那个那个变黄。 然后可以在被取消。 。

应该怎么写？

解决方案

你要遍历的数据格式是怎样的？
你现在都是用一个shoucShow控制所有的类名，改了shoucShow，当然所有就改了。
可以参考下面这样的

list:[
{text:'冠军的试炼',isCollect:false},
{text:'冠军的试炼',isCollect:false},
{text:'冠军的试炼',isCollect:false}
]

shouCClick(index){
    list[index].isCollect=!list[index].isCollect;
}

<ul>
<li @click='shouCClick(index)' :class="{'isCollect':item.isCollect}" v-for='(item,index) in list'>{{item.text}}</li>
</ul>

上面的代码没什么问题，就是给每一个都加上一个isCollect的属性，哪一个isCollect为true，就给哪一个li加上isCollect这个类名，加上这个类名，样式就变成已收藏的样式，否则就默认样式，没有收藏的样式。点击哪个li的时候就改变哪个li的样式。这样就不会影响其它的li了。
你看懂上面的代码，你就知道怎么改你的代码了！

这篇关于vue.js - v-for 里面的DIV 点击时 只是被点击的（index ）改变状态。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！