前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue.js动态绑定class,实现各色花式需求

Vue.js动态绑定class,实现各色花式需求

作者头像
我的小熊不见了丶
发布2019-05-22 20:45:35
2.4K0
发布2019-05-22 20:45:35
举报
文章被收录于专栏:晓月寒·

在项目中我们经常遇到需要动态切换class的需求,比如说点击图片放大,又或者选中项变颜色,再比如实现换皮肤的功能等等。这时候vue的动态class就能帮助我们了。

使用对象控制class

  • boolean控制
代码语言:javascript
复制
<div v-bind:class="{ active: isActive }"></div>

在上面的语法中,active是class的名字,isActive是一个控制class动态展示的boolean值。当然以上是对象控制class最简单的用法。

  • 多个boolean控制多个class。我们可以将它扩展成如下的样子以达到更复杂的样式控制。
代码语言:javascript
复制
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
代码语言:javascript
复制
data: {
  isActive: true,
  hasError: false
}
  • 或者直接传递对象
代码语言:javascript
复制
<div v-bind:class="classObject"></div>
代码语言:javascript
复制
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

在对象中通过boolean值控制class

  • computed中控制样式
代码语言:javascript
复制
<div v-bind:class="classObject"></div>
代码语言:javascript
复制
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

可以看到classObject在计算属性中,我们可以通过改变isActiveerror的值来达到动态控制class的效果。

使用数组控制class

  • 我们可以把一个数组传给 v-bind:class,以应用一个 class 列表
代码语言:javascript
复制
<div v-bind:class="[activeClass, errorClass]"></div>
代码语言:javascript
复制
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

以上代码会被渲染成:

代码语言:javascript
复制
<div class="active text-danger"></div>
  • 如果想要在数组中动态切换样式,可以使用三目运算符:
代码语言:javascript
复制
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
  • 也可以数组和对象结合使用:
代码语言:javascript
复制
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

由于用法繁多,平时我们也用不到这么多用法,最常用的就是以下几种:

代码语言:javascript
复制
<div v-bind:class="{ active: isActive }"></div>
代码语言:javascript
复制
<div v-bind:class="[{ active: isActive }, { error: isError }]"></div>

掌握这两种方法就足够应付大部分场景了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.02.28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用对象控制class
  • 使用数组控制class
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档