Vue點擊切換多個class
<template>
<div class="city">
<ul>
<li v-for="(item,index) in items" :class="{'active':item.checked}" @click="isActive(item)">{{item.text}}</li>
</ul>
</div>
</template>
<script>
import Vue from 'vue'
export default{
data:function() {
return {
items:[
{text: '靜安區'},
{text: '寶山區'},
{text: '虹口區'},
{text: '閔行區'},
{text: '普陀區'},
{text: '青浦區'},
{text: '金山區'},
{text: '奉賢區'},
{text: '浦東新區'},
{text: '長寧區'},
{text: '松江區'},
{text: '嘉定區'},
{text: '楊浦區'},
{text: '黃埔區'},
{text: '徐匯區'}
]
}
},
mounted:function() {
},
methods: {
isActive:function(item){
//方法1
if(typeof item.checked == 'undefined') {
//全局創建
//Vue.set(item,'checked',true);
//局部創建
this.$set(item,'checked',true);
// console.log(item.text)
}else{
item.checked = !item.checked;
}
//方法2
this.$set(item,'checked',!item.checked);
}
}
}
</script>
<style lang='less'>
.city {
width: 100%;
ul {
display:flex;
flex-flow: row wrap;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
text-align: center;
li {
display: inline-block;
width: 23%;
padding: 5px 0;
margin: 5px 6px 0 0;
box-sizing: border-box;
background: #eee;
}
.active {
background: blue;
color: #fff;
}
}
}
</style>
