学习使用vue.js（五）绑定Style 与Class

<———
在这之前，你肯定会注意到上面箭头所指的位置，那么你一定会看见，文章外面的大拇指图标，动动你的手指，就能点一下它，表示你很喜欢这篇文章。

如果你不愿意多花时间去自学vue.js 官网的API，那么你可以在跟着下面的例子学习最实用，最容易上手的案例。

正题：

绑定Class

首先需要有一个class

<style>
    .red{
        color:red;
    }
</style>

<h1 :class="active">{{msg}}</h1>

data(){
    return {
        msg:'hello vue',
        active:'red'
    }
}

绑定多条 Class

<style>
    .red{
        color:red;
    }
    .bg{
        background:yellow;
    }
</style>

<h1 :class="[active,active2]">{{msg}}</h1>

data(){
    return {
        msg:'hello vue',
        active:'red',
        active2:'bg'
    }
}

第二种绑定Class的方法

<style>
    .red{
        color:red;
    }
</style>

注意这里的red不是数据，而是className
<h1 :class="{red:t}">{{msg}}</h1>

data(){
    return {
        msg:'hello vue',
        t:true
    }
}

---

---

绑定Style

<h1 :style="red">{{msg}}</h1>

data(){
    return {
        msg:'hello vue',
        red:'color:red'
    }
}

第二种方法：

<h1 :style="{color:r}">{{msg}}</h1>

data(){
    return {
        msg:'hello vue',
        r:'red'
    }
}

第三种方法（绑定多条Style）

<h1 :style="[more]">{{msg}}</h1>

data(){
    return {
        msg:'hello vue',
        more:{
            background:"yellow",
            color:"red"
        }
    }
}

其他的绑定小伙伴们可以自己试试哈

文章持续跟新中。。。
请持续关注。。。。
如果你想学习的话，请关注我的文章“学习使用vue.js”系列
让我们共同进步~

上一篇：学习使用vue.js（三）条件与循环 v-if、 v-for
http://blog.csdn.net/heshuaicsdn/article/details/79199252