benefly,高桥律子,what if
本文实例讲述了vue动态绑定class的几种常用方式。分享给大家供大家参考,具体如下:
对象方法
最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染)
:class="{ 'active': isactive }"
:class="{'active':isactive==-1}"
或者
:class="{'active':isactive==index}"
第一种(用逗号隔开)
:class="{ 'active': isactive, 'sort': issort }"
第二种(放在data里面)
//也可以把后面绑定的对象写在一个变量放在data里面,可以变成下面这样 :class="classobject" data() { return { classobject:{ active: true, sort:false } } }
第三种(使用computed属性)
:class="classobject" data() { return { isactive: true, issort: false } }, computed: { classobject: function () { return { active: this.isactive, sort:this.issort } } }
数组方法
:class="[isactive,issort]" data() { return{ isactive:'active', issort:'sort' } }
(注意:三元运算符后面的“:”两边的class需要加上单引号,否则不能正确渲染)
:class="[isactive?'active':'']"
或者
:class="[isactive==1?'active':'']"
或者
:class="[isactive==index?'active':'']"
或者
:class="[isactive==index?'active':'otheractiveclass']"
//前面这个active在对象里面可以不加单引号,后面这个sort要加单引号 :class="[{ active: isactive }, 'sort']"
或者
:class="[{ active: isactive==1 }, 'sort']"
或者
:class="[{ active: isactive==index }, 'sort']"
希望本文所述对大家vue.js程序设计有所帮助。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论