v-bind如何动态绑定class属性

这篇文章主要介绍“v-bind如何动态绑定class属性”,在日常操作中,相信很多人在v-bind如何动态绑定class属性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”v-bind如何动态绑定class属性”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

成都创新互联-专业网站定制、快速模板网站建设、高性价比黄浦网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式黄浦网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖黄浦地区。费用合理售后完善,十载实体公司更值得信赖。

v-bind如何动态绑定class属性

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就是对应着增加和移除该类,取值是truefalse

  • 若value值为true,则该key样式起作用

  • 若value值为false,则该key样式不起作用



  {{message}}
  
  
  {{message}}
  
  
  
  {{message}}
  
  
  

v-bind如何动态绑定class属性

v-bind:class 指令也可以与普通的 class 属性共存。

data: {
  isActive: true,
  hasError: true
}

v-bind如何动态绑定class属性

isActive 或者 hasError 变化时,class 列表将相应地更新。例如,如果 hasError 的值为 false,class 列表将变为 "static active"。

data: {
  isActive: true,
  hasError: false
}

v-bind如何动态绑定class属性

2、绑定的数据对象不必内联定义在模板里,可绑定到一个类对象classObject



  {{message}}
  
  
  

v-bind如何动态绑定class属性

3、也可以绑定一个返回对象的计算属性


  {{message}}
  
  
  

v-bind如何动态绑定class属性

4、class中的对象比较复杂,则直接放在一个methods中,然后调用这个函数,实现动态切换










	方法methods:{{message}}
	计算属性computed:{{message}}
	按钮

v-bind如何动态绑定class属性

二、v-bind动态绑定class属性(数组语法)

我们可以把一个数组传给 :class,以应用一个 class 列表;

数组语法格式为:

:class="[base1,base2]"

v-bind 动态绑定class 数组语法,就是直接给其传入一个数组,但是数组里面都是类名,数组中的类名,在页面中都会被加入到该标签上。通过数组内元素的增加或减少来实现,样式的改变。

注意:这里面的类名都需要用 ' ' 包裹起来,如果没有包裹起来,Vue会将其当成data里面的某个属性,而去data里面寻找,显然data里面是没有该属性的,那么报错也就来了。这一点在Vue中都是通用的,没加引号当成data里面的属性来处理

注:和对象语法一样,可以和普通的类同时存在,并不冲突

{{message}}

v-bind如何动态绑定class属性

示例:




    
    



    
        {{message}}
        {{message}}
        {{message}}
        方法methods:{{message}}
        计算属性computed:{{message}}
    
    
    

v-bind如何动态绑定class属性

如果你也想根据条件切换列表中的 class,可以用三元表达式:

这样写将始终添加 errorClass,但是只有在 isActive 是 true 时才添加 activeClass。

不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:

示例:










	{{message}}
    {{message}}
    {{message}}




v-bind如何动态绑定class属性

到此,关于“v-bind如何动态绑定class属性”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


分享名称:v-bind如何动态绑定class属性
网页地址:http://hbruida.cn/article/jigsio.html

其他资讯