学习使用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

4000