通过v-for渲染出来的列表怎么改变单个item的样式？

Question

<ul class="balls red-balls">
    <li v-for="num in 33" v-on:click="select" v-bind:class="{selected:isSelected}">{{num}}</li>
</ul>

能否不操纵DOM，点击单个li后改变其样式。而不是所有li的样式都改变

需求是这样的，点击红球或者蓝球后改变样式。数据层比较好处理，每次点击将li里的值push到一个数组里。但是怎么在视图上体现出来？

Answer 1

首先 应该 是把

红球 篮球 的 数字 设置成 vue 对象的 data

如 在 created() 里初始化

created: function () {
    var blue_list = {}
    for (var i = 1; i < 34 ; ++i ) {
       blue_list[i] = {
           num : i, // 球的值
           selected : false // 代表是否选中,每个球都有独立的选中态
       }
    }
    this.$set('blue_list', blue_list)
  }

在渲染的时候

<ul class="balls red-balls">
    <li v-for="item in blue_list" v-on:click="select(item)" v-bind:class="{selected:item.selected}">{{item.num}}</li>
</ul>

在 methods 里的

select : function( item ) {
    //因为传入的是 vue data 对象，所以可以直接修改 selected 值
    item.selected = !item.selected
}

大概是这样 ， 不记得了， 好久没写 vue 了

Answer 2

给我感觉是点击高亮的一个需求，推荐看下我之前写过的一篇文章，实现起来相当简单。

使用Vue.js实现列表选中效果

Answer 3

用css 就好了，完全不用切换class,

<ul>
    <li v-for="item in list"> 
        <input type="checkbox" name="cloose">
        <span> {{ item }} </span>
    </li>
</ul>
<script>
    new Vue({
        el:"app",
        data:{
            list: [1,2,3,4,5,6,7,8,9,1,2,34,4,5,67,8,9]
        }
    })
</script>
<style>
    li{
        width: 35px;height: 35px; border: 1px solid; border-radius: 50%; position: relative;overflow:hidden;
    }
    span{
        display: block;width: 100%;height: 100%;text-align: center;line-height: 35px;background: #fff;color: #333;
    }
    
    input{
        position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin: 0;z-index: 9;opacity: 0;
    };

    input:checked + span{
        background: red;color: #fff;
    }
</style>

Answer 4

传入$event，操作$event.target

Answer 5

可以向事件传参数,根据参数做不同的样式改变

Answer 6

不明白题主所说的不操作DOM是什么含义？是不使用类似jQuery操作DOM的方式吗，还是说连click事件都不绑定？

先说说我的想法：

在所绑定的select事件里面传入一个index，写法类似v-on:click="select($index)".

设置isSelected为一个数组，通过内部属性的true或者false来判断是否添加selected类名，写法类似v-bind:class="{selected:isSelected[$index]}"

抛砖引玉~

Answer 7

每一个数据都需要设置isSelected属性
然后v-on:click="change(num)"
change方法里改变num的isSelected属性