【无标题】

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