Vue 中动态添加class（使用v-bind:class）

今天在Vue中动态修改类名，元素的样式就是不改变，类名也没有加上去，里面的问题具体我还是不太清楚，有可能是因为自己不认真，把 :class= 后面的内容的格式给整错了，下面将正确的做法记录一下，便于以后查看。

1. 用法一：
   参考：

   1. 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>
      

   2. selected CSS样式示例:

       .nav_select_selected{
          border-bottom: 3px solid #4b9fd5;
        }

   3. 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>

2. 关于动态绑定类名和样式还有几种用法，详情请见：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

转载于:https://www.cnblogs.com/zhuchenglin/p/9836397.html