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

问题描述

问 题

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

解决方案

首先 应该 是把

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

这篇关于vue.js - 通过v-for渲染出来的列表怎么改变单个item的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！