vue :class与:style

最新推荐文章于 2025-06-11 19:50:48 发布

linecloud

最新推荐文章于 2025-06-11 19:50:48 发布

阅读量493

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/linecloud/article/details/91888797

本文深入探讨了Vue.js中动态应用样式和类的方法，包括使用v-bind:class和v-bind:style的不同方式，如三元表达式、数组语法、计算属性等，帮助开发者更灵活地控制组件样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div v-bind:class="{ active: isActive }"></div>

1.当active 为true时 div会增加一个isActive的类。

2. :class也可放置变量

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
会被解析成 <div class="active"></div>

3.：class 后也可放置计算属性

<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'
    }
  }
}

4.数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
渲染为
<div class="active text-danger"></div>

5 三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

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

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

---------------------------------------------------------------------

1.数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

data(){
  return{
    baseStyles:{
        color:red
    },
    overridingStyles:{
        height:100px
    }
  }
}