Vue.js实例学习：Class 与 Style 绑定

#绑定 HTML Class

一、对象语法

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

<style type="text/css">
.static{
background: red;
}
.active{
background: blue;
width: 100px;
}
.test{
background: yellow;
height: 100px;
}
</style>

<!-- active、test为类名；
其isactive、is的值为true/false
决定着active、test这两个类是否生效。-->
<div class="static" v-bind:class="{active:isactive,test:is}">{{ fullName }}</div>

<script type="text/javascript">
var vm = new Vue({
el:".static",
data:{
fullName:"ada",
isactive:false,//true or false
is:false,      //true or false
active:"aa"    //跟上面active没关系，两者互不影响
},
});
</script>

1、上面代码 执行结果：



2、如果我们将上面 isactive的值改为true ; is的值仍为false;

html部分相当于：（部分不必要部分已简化）

<div class="static active">{{ fullName }}</div>

我们发现此时.active 生效；宽度变为100px;背景变为蓝色。

执行结果：



3、我们再将上面的 isactive、is值均改为true ;

此时高度变为100px;背景变为黄色。

html部分相当于：（部分不必要部分已简化）

<div class="static active test">{{ fullName }}</div>

执行结果：



[b]4、也可以计算属性[/b]

我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

<div v-bind:class="classObject"></div>

data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
test: this.error && this.error.type === 'fatal'
}
}
}

二、数组语法

<style type="text/css">
.static{
background: red;
}
.active{
background: blue;
width: 100px;
}
.test{
background: yellow;
height: 100px;
}
</style>

<div class="static" v-bind:class="[activeClass, errorClass]"<
4000
/span>>dada</div>

<script type="text/javascript">
var vm = new Vue({
el:".static",
data:{
activeClass:"active",
errorClass:"test"
},
});
</script>

1、因为activeClass、errorClass不为空，所以.active、.test均生效。

输出结果：



html相当于渲染为：

<div class="static active test"></div>

可见class的顺序（从左至右）：

原html的class -> v-bind:绑定的class

2、在数组语法中也可以使用对象语法

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

三、用在组件上

这里我们使用的是组件的全局注册。

<div id="example">
<my-component class="class3" v-bind:class="{ class4: isActive }"></my-component>
</div>

<script type="text/javascript">
// 注册 (注册必须在 创建根实例之前，否则失效)
Vue.component('my-component', {
template: '<div class="class1 class2">A custom component!</div>'
})

// 创建根实例
new Vue({
el: '#example',
data:{
isActive:true,
}
})
</script>

执行后

HTML 被渲染为:

<div class="class1 class2 class3 class4">A custom component!</div>

可见使用组件时class的顺序（从左至右）：

注册组件时的class -> 使用组件时添加的class -> 使用组件时v-bind:绑定的class

#绑定内联样式

一、对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。

<div id="app">
<div v-bind:style = "{color:mycolor,fontSize:myfontsize + 'px'}">666</div>
</div>

<!--这种方式效果 等效于上面；
说明vue遵循了css的规则,对绑定父元素的子元素也生效，-->
<!-- <div id="app" v-bind:style = "{color:mycolor,fontSize:myfontsize + 'px'}">666</div> -->

<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
mycolor:'red',
myfontsize:'40',
},
});
</script>

执行结果：



直接绑定到一个样式对象通常更好，这会让模板更清晰：

优化上面代码：

<div id="app" v-bind:style = "styleObject">666</div>

<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
styleObject:{
color:'red',
fontSize:'40px',
}
}
});
</script>

执行结果同上。

二、数组语法

用法：数组里套对象。

v-bind:style 的数组可以将多个样式对象应用到同一个元素上:

<div id="app" v-bind:style = "[styleObj1,styleObj2]">666</div>

<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
styleObj1:{
color:'red',
fontSize:'40px',
},
styleObj2:{
letterSpacing:"100px",
}
}
});
</script>

执行结果：

三、自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，

Vue.js 会自动侦测并添加相应的前缀。

四、多重值

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

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

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。