资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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

  • 若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属性
网站URL：http://www.cdkjz.cn/article/jigsio.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都app软件开发网站制作报价做网站成都户外广告牌设计温江网站建设鸿程源茂bgp多线机房托管成都网站建设网站设计公司成都广告公司

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图