今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以后查看。
-
用法一:
参考:-
HTML示例:
//将下面nav_datas数组中的数据给渲染出来,并利用nav_datas中的class_true的boolean值来表示该元素类名是否存在
<template>
<div>
<ul>
<li v-for="(nav_data,index) in nav_datas" :key="index" :class="{'nav_select_selected':nav_data.class_true}">{{nav_data.name}}</li>
</ul>
</div>
</template> -
selected CSS样式示例:
.nav_select_selected{
border-bottom: 3px solid #4b9fd5;
} -
JavaScript示例:
<script>
export default {
data(){
return {
//渲染数据的数组
nav_datas:[
{class_true:false,name:'test1'},
{class_true:false,name:'test2'},
{class_true:false,name:'test3'},
{class_true:false,name:'test4'},
{class_true:false,name:'test5'},
] }
},
methods:{ },
mounted(){
//这里的数字可以换成 0~this.nav_datas.length 之间任意的数字
this.nav_datas[0].class_true = true
}
}
</script>
-
关于动态绑定类名和样式还有几种用法,详情请见:https://cn.vuejs.org/v2/guide/class-and-style.html#%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95
我在解决问题过程中参考了这篇文章:vue中v-bind:class动态添加class
如需转载,请注明出处:https://www.cnblogs.com/zhuchenglin/p/9836397.html