vue :class与:style

最新推荐文章于 2024-09-20 11:35:39 发布

linecloud

最新推荐文章于 2024-09-20 11:35:39 发布

阅读量445

点赞数

本文链接：https://blog.csdn.net/linecloud/article/details/91888797

版权

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