Vue Class与Style 绑定

2019-03-12 本文已影响0人 quanCN

对象语法
我们可以传给v-bind:class一个对象，以动态地切换 class：

<style>
    .a{color: red;}
    .b{font-size: 70px;}
</style>

<span v-bind:class="{a:textColor,b:fontSize}">hello world</span>

data:{
    textColor : true,
    fontSize : true
}

绑定的数据对象不必内联定义在模板里，也可以简写为：

<span v-bind:class="classObject">hello world</span>

data:{
    classObject : {
        a : true,
        b : true
    }
}

数组语法
可以把一个数组传给v-bind:class，以应用一个 class 列表：

<span v-bind:class="[colorClass,fontClass]">hello world</span>

data:{
    colorClass : "a",
    fontClass : "b"
}

对象语法
v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
```
<span v-bind:style="{color:textColor,fontSize:fontSize}">hello world</span>
```
```
data:{
    textColor : "red",
    fontSize : "100px"
}
```
也可以绑定一个样式对象
```
<span v-bind:style="text">hello world</span>
```
```
data:{
    text:{
        color : "red",
        fontSize : "100px"
    }
}
```
数组语法
v-bind:style的数组语法可以将多个样式对象应用到同一个元素上：
```
<div v-bind:style="[baseStyles, overridingStyles]"></div>
```