有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue动态添加class(实现各色花式需求)

vue 炮渣日记 2周前 (11-13) 12次浏览 已收录 0个评论 扫描二维码

Vue.js动态class

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

使用对象控制class

  • boolean控制
<div v-bind:class="{ active: isActive }"></div>

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

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

在对象中通过boolean值控制class

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

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

使用数组控制class

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

以上代码会被渲染成:

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

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

<div v-bind:class="{ active: isActive }"></div>
<div v-bind:class="[{ active: isActive }, { error: isError }]"></div>

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

感谢您的关注~

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址