<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到一个数组里。但是怎么在视图上体现出来？

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

胡萝卜有点坑

6681611

发布于
2016-10-19

✓ 已被采纳

首先应该是把

红球篮球的数字设置成 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 了

xiaoluoboding

2.1k2410

发布于
2016-10-19

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

yeungx

用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>