vue.js学习笔记之绑定style样式和class列表

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

一.绑定class属性。

绑定数据用v-bind:命令，简写成:

语法：<div v-bind:class="{ active: isactive }"></div>。class后面的双引号里接受一个对象字面量/对象引用/数组作为参数，

这里，{active: isactive}是对象参数，active是class名,isactive是一个布尔值。下面是一个例子：

绑定对象字面量

html：

<div id="classbind">
<span :class="{warning:iswarning,safe:issafe}" v-on:click="toggle">
状态:{{alert}}{{issafe}}
</span>
</div>
//js
var app11=new vue({
el:'#classbind',
data:{
iswarning:true,
alertlist:['红色警报','警报解除'],
alert:''
},
computed:{
issafe:function(){
return !this.iswarning;
}
},
methods:{
toggle:function(){
this.iswarning=!this.iswarning;
this.alert= this.iswarning?this.alertlist[0]:this.alertlist[1];
}
}
});

css:

.warning{
color:#f24;
}
.safe{
color:#42b983;
}

当点击状态文字时，可以切换后面的文字和颜色

//状态:警报解除true

//状态:红色警报false

绑定对象引用

这里绑定的对象可以写到vue实例的data里面，而在class="classobj "，双引号中的class是对vue实例中classobj对象的引用。classobj可以放在data中或者computed中，如果在computed中，则classobj所对应的函数必须返回一个对象如下：

js:

var app11=new vue({
el:'#classbind',
data:{
iswarning:true,
alertlist:['红色警报','警报解除'],
alert:''
},
computed: {
issafe: function () {
return !this.iswarning;
},
classobj:function(){
return {
warning: this.iswarning,
safe:this.issafe
}
}
},
methods:{
toggle:function(){
this.iswarning=!this.iswarning;
this.alert= this.iswarning?this.alertlist[0]:this.alertlist[1];
}
}
});

绑定数组

html:

<div v-bind:class="classarray" @click="removeclass()">去掉class</div>

js

data: {
classarray:["big",'red']
}
methods:{
removeclass:function(){
　　this.classarray.pop();
}
}

css:

.big{
font-size:2rem;
}
.red{
color:red; 
}

效果，点击去掉class，会调用removeclass函数，去掉classarray数组的最后一项，第一次，去掉'red',字体颜色由红变黑，再点，去掉'big',字体变小。

二、绑定内联style

此时此刻，我一边看着本页旁边的那个vue api文档学，一边到这里卖，装逼的感觉真爽o(^▽^)o

html

<div id="stylebind">
<span :style="{color:thecolor,fontsize:thesize+'px'}" @click="bigger">stylebind</span>
</div>

css

这个不需要css。。。

js

var app12=new vue({
el:'#stylebind',
data:{
thecolor:'red',
thesize:14
},
methods:{
bigger:function(){
this.thesize+=2;
}
}
});

除了传入对象字面量以外，也可以传入对象引用和数组给v-bind:style

以上所述是小编给大家介绍的vue.js学习笔记之绑定style和class，希望对大家有所帮助