美文网首页
单选 vue

单选 vue

作者: 流泪手心_521 | 来源:发表于2020-10-27 10:52 被阅读0次

一、单选：

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

1.html

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

2.js

var app = new Vue({
    el : ".box",
    data : {
        cities : ["上海","北京","广州","重庆","西安"],
        n : 0
    },
    methods :{
        changeList(index){
            this.n = index;//this指向app
        }
    }
})
3 image.png

相关文章