vue.js - 通过v-for渲染出来的列表怎么改变单个item的样式?
本文介绍了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屋!
查看全文