我是靠谱客的博主 开放黄蜂,最近开发中收集的这篇文章主要介绍【Vue基础】:class的几种绑定方式,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

最简单的绑定

复制代码
1
2
:class="{'active':isActive}"

判断是否绑定一个active

复制代码
1
2
3
4
:class="{'active': isActive == -1}" //或者 :class="{'active': isActive == index}"

绑定并判断多个

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//第一种(用逗号隔开) :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 } } }

单纯数组

复制代码
1
2
3
4
5
6
7
8
:class="[isActive, isSort]" data() { return { isActive:'active', isSort:'sort' } }

数组对象结合动态判断

复制代码
1
2
3
4
5
6
7
//前面这个active在对象里面可以不加单引号,后面这个sort要加单引号 :class="[{active: isActive},'sort']" //或者 :class="[{active: isActive == 1}, 'sort']" //或者 :class="[{active: isActive == index}, 'sort']"

数组与三元运算符结合判断选择需要的class

复制代码
1
2
3
4
5
6
7
8
:class="[isActive?'active':'']" //或者 :class="[isActive==1?'active':'']" //或者 :class="[isActive==index?'active':'']" //或者 :class="[isActive==index?'active':'otherActiveClass']"

最后

以上就是开放黄蜂为你收集整理的【Vue基础】:class的几种绑定方式的全部内容,希望文章能够帮你解决【Vue基础】:class的几种绑定方式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(46)

评论列表共有 0 条评论

立即
投稿
返回
顶部