vue 动态添加样式

vue实现点击切换改变样式

html代码：根据数据动态循环一个列表

<ul>
    <li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':clicked==index}" @click="changeTab(index)">{{list}}</li>
</ul>

js代码：

export default {
    data(){
        return{
            dataList:["选项1","选项2","选项3","选项4","选项5","选项6"],
            clicked:0   //标识，初始化默认选中第一项
        }
    },
    methods:{
        changeTab(index){
            this.clicked = index;
        }
    }
}

css样式，点击选中添加黑色边框

.bor{
   border:2px solid black;
}

效果：