1.单选
<ul>
<li
v-for="item,index in cites"
class="item"
:class="{'checked' : index == n }"
@click='choose(index)'>{{ item.name }}</li>
</ul>
<script>
export default {
data(){
return{
checked:true,
cites:[
{name:'成都',checked:false},
{name:'北京',checked:false},
{name:'上海',checked:false},
{name:'重庆',checked:false},
{name:'天津',checked:false}
],
//下标控制index的class变化
n:0
}
},
methods:{
choose(index){
//控制n的值,变为用户的选中
this.n = index;
}
}
}
</script>
<style>
.item{
float: left;
width: 50px;height: 50px;
border: 1px solid #e5e5e5;
list-style: none;
text-align: center;
line-height: 50px;
margin: 10px;
border-radius: 5px;
}
.checked{
background-color:blanchedalmond;
}
</style>
2.多选
<ul>
<li
v-for="item,index in cites"
class="item"
:class="{'checked' : n.includes(index) }"
@click='choose(index)'>{{ item.name }}</li>
</ul>
<script>
export default {
data(){
return{
checked:true,
cites:[
{name:'成都',checked:false},
{name:'北京',checked:false},
{name:'上海',checked:false},
{name:'重庆',checked:false},
{name:'天津',checked:false}
],
//下标控制index的class变化
n:[]
}
},
methods:{
choose(index){
//控制n的值,变为用户的选中
//判断当前index是否在n中
if( this.n.includes(index) ){
this.n = this.n.filter( v => v != index)
}else{
this.n.push(index);
}
}
}
}
</script>
3.方法三,数据结构的改变
<ul>
<li
v-for="item,index in cites"
class="item"
:class="{ 'checked': item.checked }"
@click='choose(item)'>{{ item.name }}</li>
</ul>
<script>
export default {
data(){
return{
checked:true,
cites:[
{name:'成都',checked:false},
{name:'北京',checked:false},
{name:'上海',checked:false},
{name:'重庆',checked:false},
{name:'天津',checked:false}
],
}
},
methods:{
choose(item){
//控制n的值,变为用户的选中
//判断当前index是否在n中
item.checked = !item.checked;
}
}
}
</script>