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