vue 設置動態class

一 ， v-for中，循環展示圖標（拼接）

                   <div v-for='(item,index) in list' :key='index'>

                        <span :class=" 'iconfont ' + item.ico "></span>

                        <p :class={'slider-change':ischange}>{{item.title}}</p>

                    </div>

 

 

　　　　 data中的數據：

list:[{title:'地區管理',id:0,ico:'icon-diqiu',src:'http://www.baidu.com'},{title:'服務管理',id:1,ico:'icon-fuwuqi',src:'https://www.qq.com/'},{title:'子系統管理',id:2,ico:'https://www.sina.com.cn/',src:'https://www.163.com/'},{title:'菜單管理',id:3,ico:'icon-zixitongguanli'},{title:'機構管理',id:4,ico:'icon-zixitongguanli'},{title:'角色管理',id:5,ico:'icon-zixitongguanli'}

 

 

二，  if（點擊/true/條件）{有class}

　　　　　　

 <li v-for="(item,index) in title" ' :class={'top-active':id===item.id}  :key="index" @contextmenu.prevent.stop="rightClick(item,$event)">

                                {{item.title}}

  </li>

（如果id===item.id，class="top-active",否則，沒有class）

 

 

三，  if（點擊/true/條件）{class1} else{class2}

 <div :class="[isdata?'active':'top-left']" >

                    </div>

 

四，  復雜的？？？

:class="[[item.child?'silderte-item':'silder-item'], {'active':id===item.id&&!item.child}]"   

:class="[{'active silder-item':id===item.id&&!item.child},{'activete silderte-item':id===item.id&&item.child},{'silder-item':id!==item.id&&!item.child},{'silderte-item':id!==item.id&&item.child}]"

 

 

ps: 一個元素不能用兩個動態class，但是可以使用一個動態一個靜態的class