Vue和小程序中制作单选、多选点击变色教程

在Vue或者小程序中经常用到单选或者多选点击变色的事件，Vue和小程序都是数据for遍历出来的，不能和普通那样设置点击事件更改样式，按照之前那样会全部都变色了。

在Vue或小程序中利用元素的id的不同来判断给哪个添加样式。

在Vue中

<div id="app">
<h1>Vue中制作单选、多选点击变色教程</h1>
<h2>原文地址：<a href="https://blog.bg7zag.com/rOdt5">https://blog.bg7zag.com/rOdt5</a></h2>
<h2>单选</h2>
<ul>
<li v-for="item in phones" :key="item.id" :class="radio == item.id ? 'bgColor':'' " @click="clickRadio(item.id)">{{item.name}}</li>
<div class="clean"></div>
</ul>
<h2>多选</h2>
<ul>
<li v-for="items in phones" :class="Checkbox.includes(items.id) ? 'bgColor':'' " @click="clickCheckbox(items.id)">{{items.name}}</li>
<div class="clean"></div>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
// 定义一个变量用于储存id 单选只储存一个使用字符串
radio:'',
// 多选储存多个id 则使用数组
Checkbox:[],
phones:[
{
id:1,
name:'华为',
},
{
id:2,
name:'荣耀',
},
{
id:3,
name:'小米',
},
{
id:4,
name:'魅族',
},
{
id:5,
name:'OPPO',
},
{
id:6,
name:'vivo',
},
]
},
methods:{
clickRadio:function(e){
if(this.radio == e){
// 如果已经点击则取消点击样式
this.radio = ''
}
else{
// 把点击的元素id放入radio中
this.radio = e;
}
},
clickCheckbox:function(e){
if(this.Checkbox.includes(e)){
this.Checkbox.splice(this.Checkbox.indexOf(e),1);
}else{
// 把点击的元素id放入Checkbox数组中
this.Checkbox.push(e);
}
}
}
})
</script>

在小程序中的原理也是和Vue中一样，只是设置数据的方式不一样而已，Vue中直接使用 this.radio = e ,但在小程序中则是

PS: (2018-02-08) 小程序的多选不能这样做，如果点击执行请求的话，则从请求中获取状态码判断是否被选中( {{item.checkbox == 1?'bgColor':''}} );

如果没有执行请求的话，可以在预设data中的phones数组中添加状态码。

<text wx:for="{{TFtips}}" id='{{item.id}}' wx:key="{{item.id}}" data-index="{{index}}" bindtap='color_green' class="{{item.checked?'bgColor':''}}">{{item.name}}</text>

data中的数组 {id:1,name:'华为',checked:false}, js中这样写：

发送评论编辑评论