vue 实现单选/多选效果

转：https://blog.csdn.net/Number7421/article/details/81002729

不过我以前都写过这三种方法了，很pang额，怕之后忘记了，偷个懒拿别人的，以免以后忘记了

一、单选：

思路：当点击的索引值 == v-for循环的索引值时，给你那个li添加选中样式

html：

<ul class="box">
    <li v-for="c,index of cities" :class="{checked:index==n}" @click="changeList(index)">{{c}}</li>
</ul>

CSS样式如下：

<style type="text/css">
body{margin:0;}
ul{
    padding:0; list-style:none; 
    margin:150px 150px;
}
li{
    width:80px; height:50px; 
    display:inline-block;
    border-radius:8px; border:1px #000 solid;
    text-align:center; line-height:50px;
    cursor:pointer; 
    transition:all 0.3s linear;
    margin-left:5px;
}
li:hover{
    background-color:#0CF; color:#fff; 
    border:1px #fff solid;
}    
li.checked{
    background-color:#0CF; color:#fff; 
    border:1px #fff solid;
}
</style>

View Code