27-【Vue基础】:class的几种绑定方式

对象方法

最简单的绑定
这里的active加不加单引号都可以，以下也一样都能渲染,但是如果你的class需要 - 连接的，必须用引号。

:class="{ active: isActive }"
:class="{ 'c-active': isActive }"

判断是否绑定一个active

: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需要加上单引号，否则不能正确渲染

: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']"

27-【Vue基础】:class的几种绑定方式相关推荐

vue父子组件的三种传值方式
vue父子组件的三种传值方式函数类型的props传值 //父组件 <template><Children :getChildName="getChildName" ...
C++中的两种绑定方式（静态绑定、动态绑定）
两种绑定方式静态绑定:在编译时刻,根据指针或引用变量的静态类型来决定成员函数属于哪一个类. 动态绑定:在运行时刻,根据指针或引用变量实际指向或引用的对象类型(动态类型)来确定成员函数属于哪一个类. ...
JavaScript中this的五种绑定方式详解
1 this的五种绑定方式 1.1 默认绑定默认绑定是指当函数调用时,没有为其指定对象上下文,此时会将该函数的this绑定到全局对象(window对象).自ES5有了严格模式之后,默认绑定方式又分为 ...
java两种绑定方式_Javascript绑定事件的两种方式的区别
命名函数 function check(){ //code } 匿名函数 window.onload = function(){ //先获取元素对象,再绑定事件,绑定的是匿名函数不可重用 var bt ...
P21-前端基础-CSS颜色四种表示方式
P21-前端基础-CSS颜色四种表示方式 1.概述颜色单位: 在CSS中可以直接使用颜色名来设置各种颜色比如:red.orange.yellow.blue.green - - 但是在css中直接使 ...
Vue基础之Class和Style绑定
既然v-bind可以动态绑定标签的属性,那么也可以用v-bind来处理class和style,只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 ...
vue基础小节 v-mode属性双向绑定跑马灯十秒挑战计算器 v-for和key属性 v-if与v-show用法区别 tap切换
vue代码基本结构 <div class="app"><div>{{mge}} ...
Vue组件传值（8种传值方式）值得收藏！
前言: vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方 ...
vue组件间的5种传值方式
父组件向子组件传值: 比如有一个 Father.vue 的父组件要传值给 Children.vue 的子组件,完成共需四步: 父组件 Father.vue 内容,注意里面的操作步骤: <temp ...

27-【Vue基础】:class的几种绑定方式

对象方法

数组方法

27-【Vue基础】:class的几种绑定方式相关推荐

最新文章

热门文章