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