0x4 精读Vue官方文档 – Class 与 Style 绑定-一一网

精读 Vue 官方文档系列 ?

介绍

v-bind 指令可以将样式数据绑定到 class 与 style 属性上，因为它们与普通的 HTML-Attribute 没有本质区别。
v-bind 指令专门为绑定样式数据进行了增强，分别是v-bind:class 与 v-bind:style 两个指令参数。

<btn class="green" :class="red"></btn> 
<!--<button class="green red"></button>-->
复制代码

Vue 会将 :class，:style 绑定的动态样式数据与原生 HTML class ，style Attribute 的静态字符串值进行合并。

绑定 HTML Class

对象语法

<btn :class="classObj"></btn>
复制代码

{
  computed: {
    classObj() {
      return {
        red: this.isRed,
        yellow: this.isYellow,
        green: this.isGreen,
      };
    },
  },
}
复制代码

当 v-bind:class 接收的是一个对象时，对象的 key 便是 class 类名，而 value 则是用来切换类名是否可用的状态开关。

数组语法

<btn :class="['red', classObj, isBlue ? 'blue' : '']"></btn>
复制代码

{
    data:{
        isBlue:true,
        classobj:{
            'green' : true,
        }
    }
}
复制代码

v-bind:class 的数组语法更为灵活，它不仅可以支持字符串与对象类型的值混用，还可以进行简单的三元表达式计算。

绑定 HTML Style

对象语法

采用驼峰式 (PascalCase) 命名的 JavaScript 对象。

<btn ：style="{fontSize:'20px'}"></btn>
复制代码

为了支持 Style CSS 的兼容性写法，对象中的 value 可以是一个数组，数组中的取值会基于当前浏览器的支持情况进行选择性的应用。

<div :style="{display: ['-webkit-box', '-ms-flexbox', 'flex']}"></div>
复制代码

数组语法

v-bind:style 数组类型的方式，每个数组元素都是一个采用驼峰式 (PascalCase) 命名的 JavaScript 对象。

数组语法可以将多个样式对象应用到同一个元素上。

<btn :style="[styleObj, styleObj2, {fontWeight:'bold'}]"></btn>
复制代码

{
    data(){
        return {
            styleObj:{
                fontSize:'20px'
            }
        }
    },
    computed:{
        styleObj2(){
            return this.isBlue ？ {color:'blue'} : null;
        }
    }
}
复制代码