Vue常用指令之四通过属性绑定指令绑定class和style来控制元素样式

[TOC]

## 代码示例

话不多说先上示例代码

```HTML
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
		<script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>
    <style>
        .redbg {
            background-color: red;
            width: 100px;
            height: 100px;
        }

.bluebg {
            background-color: blue;
            width: 100px;
            height: 100px;
        }

.colorwhite {
            color: white;
        }

.colorweight {
            font-weight: bold;
            letter-spacing: 10px;
        }
    </style>
</hred>
<div id="app">
    <div class="bluebg colorwhite" style="font-weight: bold;letter-spacing:10px">我是与vue无关</div>
    <div :class="['redbg','colorwhite',active?'colorweight':'']">三元表达式</div>
    <div :class="['bluebg','colorwhite',{'colorweight':active}]">数组加对象</div>
    <div :class="bojClass">只有对象</div>
    <div :style="{'background-color':'#ddd',color:'red',width:'150px',height:'150px'}">注意样式属性中有-符号的需要加''包裹</div>
    <div :style="[style1,style2]">用数组渲染</div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            active: true,
            bojClass: { redbg: true, colorwhite: true },
            style1: { 'background-color': '#eee', color: 'red', width: '150px', height: '150px' },
            style2: { 'letter-spacing': '10px' },
        },
        methods: {}
    })
</script>

</html>
```

上面代码展示了绑定class和style这两种属性的方式来控制元素的样式

## 绑定class

使用vue绑定calss常用的三种方式

+ 三元表达式：class="['redbg','colorwhite',active?'colorweight':'']"这一段代码中我们在最后通过三元表达式来控制元素是否具有.colorweight类的样式，active是一个变量在vue的data中已经声明了，我们可以通过控制active变量来控制元素的样式

+ 数组加对象：class="['bluebg','colorwhite',{'colorweight':active}]"这中方式起始就是三元表达式的简写方式，在最后的对象中我们同样可以通过变量active来控制元素的样式

+ 对象：class="bojClass"在vue中也可以直接绑定一个对象给class，所有元素样式都可以通过对象的变化来控制元素样式，class="{ redbg: true, colorwhite: true }"这样也是可以的

## 绑定style

+ 对象：style="{'background-color':'#ddd',color:'red',width:'150px',height:'150px'}"在vue中通过指令绑定style同样可以直接将样式写在标签上，指令绑定style后属性值是一个对象，这里需要的注意的是如果样式属性中带-符号的话需要用单引号包括起来，示例中的background-color就需要单引号包裹

+ 多对象数组：style="[style1,style2]在样式属性较多或需要特别控制的时候，可以使用数组的方式来组合元素的样式需要