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

Question

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

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

应该怎么写？

Answer 1

你要遍历的数据格式是怎样的？
你现在都是用一个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了。
你看懂上面的代码，你就知道怎么改你的代码了！

Answer 2

写了个 demo，你参考一下：

https://jsfiddle.net/hsfzxjy/...

要点：你需要在某个地方保存该对象是否被选中的状态。