vue动态绑定class
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue动态绑定class相关的知识,希望对你有一定的参考价值。
参考技术A 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。vue官方文档对于class和style绑定有两种方法,对象语法和数组语法。
1.绑定 html Class对象绑定
我们用传给v-bind:class 一个对象,动态切换class 是否存在
<div v-bind:class=" active: isActive "></div> ; //这里我们使用isActive 这个变量动态判断active是否显示到html
vue对象里面
data:
isActive:true,//判断是否显示active这个class
页面渲染为:
<div class="active"></div>
当然我们也可以对象中传入更多属性来动态切换多个 class,此外,v-bind:class 指令也可以与普通的 class 属性共存。
<div class="static" v-bind:class=" active: isActive, 'text-danger': hasError "> 动态切换多个 class</div>
vue对象里面
data:
isActive:true,
hasError:false
页面渲染为:
<div class="static active"> 动态切换多个 class</div>
对于上面v-bind:class 指令我们也可以传一个对象
<div v-bind:class="classObject">动态切换多个 class</div>
data:
classObject:
active: true,
'text-danger': false
页面渲染为:
<div class="active"> 动态切换多个 class</div>
对于动态class绑定我们也可以通过计算属性返回对象来动态判断class的绑定值
<div v-bind:class="classObject"></div>
data:
isActive: true,
error: null
,
computed:
classObject: function ()
return
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
2.绑定 HTML Class数组语法
除了对象语法绑定class,我们还有一种方法是数组语法,我们可以把一个数组传给 v-bind:class。
<div v-bind:class="[activeClass, errorClass]"></div>
data:
activeClass: 'active',
errorClass: 'text-danger'
页面渲染为
<div class="active text-danger"></div>
我们也可以通过三元表达式来进行判断切换class:
<div v-bind:class="[isActive ? activeClass : ' ', errorClass]"></div> ;//这里判断是如果isActive 为true显示activeClass ,errorClass,否则只显示errorClass
对于class绑定当有多个条件 class 时这样写有些繁琐,在数组语法中也可以使用对象语法。
<div v-bind:class="[ active: isActive , errorClass]"></div>
vue动态绑定class的几种方式
参考技术A 最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染)判断是否绑定一个active
或者
绑定并判断多个
第一种(用逗号隔开)
第二种(放在data里面)
//也可以把后面绑定的对象写在一个变量放在data里面,可以变成下面这样
第三种(使用computed属性)
单纯数组
(注意:三元运算符后面的“:”两边的class需要加上单引号,否则不能正确渲染)
或者
或者
或者
//前面这个active在对象里面可以不加单引号,后面这个sort要加单引号
或者
或者
以上是关于vue动态绑定class的主要内容,如果未能解决你的问题,请参考以下文章