v-bind如何动态绑定class属性
这篇文章主要介绍“v-bind如何动态绑定class属性”,在日常操作中,相信很多人在v-bind如何动态绑定class属性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”v-bind如何动态绑定class属性”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
成都创新互联-专业网站定制、快速模板网站建设、高性价比黄浦网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式黄浦网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖黄浦地区。费用合理售后完善,十载实体公司更值得信赖。
v-bind可以动态设置class属性,用以实现动态样式。写法:
<标签名 v-bind:class="vue实例中的数据属性名"/> <标签名 :class="vue实例中的数据属性名"/>
一、v-bind动态绑定class属性(对象语法)
动态绑定class属性之后,class的值是一个变量,可以将它放到data中动态绑定样式,以动态地切换 class。
1、直接通过{}
绑定一个或多个类
v-blid:class
的属性中可以传入一个对象,对象中包括一组组键值对
:class= "{key1:value1,key2:value2...}"
类名就是对应的样式,也就是键(key);value就是对应着增加和移除该类,取值是true
和false
若value值为
true
,则该key样式起作用若value值为
false
,则该key样式不起作用
{{message}}
{{message}}
{{message}}
v-bind:class
指令也可以与普通的 class 属性共存。
data: { isActive: true, hasError: true }
当 isActive
或者 hasError
变化时,class 列表将相应地更新。例如,如果 hasError
的值为 false
,class 列表将变为 "static active
"。
data: { isActive: true, hasError: false }
2、绑定的数据对象不必内联定义在模板里,可绑定到一个类对象classObject
{{message}}
3、也可以绑定一个返回对象的计算属性
{{message}}
4、class中的对象比较复杂,则直接放在一个methods中,然后调用这个函数,实现动态切换
方法methods:{{message}}
计算属性computed:{{message}}
二、v-bind动态绑定class属性(数组语法)
我们可以把一个数组传给 :class
,以应用一个 class 列表;
数组语法格式为:
:class="[base1,base2]"
v-bind 动态绑定class 数组语法,就是直接给其传入一个数组,但是数组里面都是类名,数组中的类名,在页面中都会被加入到该标签上。通过数组内元素的增加或减少来实现,样式的改变。
注意:这里面的类名都需要用
' '
包裹起来,如果没有包裹起来,Vue会将其当成data里面的某个属性,而去data里面寻找,显然data里面是没有该属性的,那么报错也就来了。这一点在Vue中都是通用的,没加引号当成data里面的属性来处理
注:和对象语法一样,可以和普通的类同时存在,并不冲突
{{message}}
示例:
{{message}}
{{message}}
{{message}}
方法methods:{{message}}
计算属性computed:{{message}}
如果你也想根据条件切换列表中的 class,可以用三元表达式:
这样写将始终添加 errorClass,但是只有在 isActive 是 true 时才添加 activeClass。
不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:
示例:
{{message}}{{message}}{{message}}
到此,关于“v-bind如何动态绑定class属性”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
分享名称:v-bind如何动态绑定class属性
网页地址:http://hbruida.cn/article/jigsio.html