Vue的单选/多选效果

单选

html

<li v-for="(item, i) in items" :class="{active:i==n}" @click="Change(item,i)">
   {{item.value}}
</li>

js

<script>
    export default {
        name: "login",
        data(){
            return {
                items: [{
                    name: '1',
                    value: '用户',
                }, {
                    name: '2',
                    value: '商家'
                }],
                n:0
            }
        },
        methods: {
            radioChange:function (item,i) {
                  this.n=i;         //控制选项与数据同步
            }
        }
    }
</script>

css

.active{}

多选

html

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

js

<script>
    export default {
        name: "login",
        data(){
            return {
                cities : [
                {city:"北京",bOn:false},
                {city:"上海",bOn:false},
                {city:"重庆",bOn:false},
                {city:"广州",bOn:false},
                {city:"西安",bOn:false}
                ]
            }
        },
        methods: {
            radioChange:function (item,i) {
                  this.n=i;         //控制选项与数据同步
            }
        }
    }
</script>

css

body{margin:0;}
.box{ margin:150px 150px;}
ul{
    padding:0; 
    list-style:none;
}
li{
    width:50px; height:30px; display:inline-block;
    text-align:center; line-height:30px;
    cursor:pointer;margin-left:5px;
}
li:before{ 
    display:inline-block; width:10px; height:10px; 
    line-height:10px; content:""; border:1px #000 solid; 
    margin-right:2px; transition:all 0.3s linear;
}   
li.checked:before{ 
    background-color:#0CF; 
    border:1px #fff solid;
}
li.checked{color:#0CF;}

借鉴网址：https://blog.csdn.net/Number7421/article/details/81002729