vue.js binding style style and class list

A common requirement for data binding is to manipulate the element’s class list and its inline styles. Since they are both attributes, we can use v-bind to handle them: we just need to evaluate the final string of the expression. However, string concatenation is cumbersome and error-prone. Therefore, Vue.js specifically enhances v-bind when used with classes and styles. In addition to strings, the result type of an expression can also be an object or an array.

1. Bind the Class attribute.

Use the v-bind: command to bind data, abbreviated as:

Syntax:

. The double quotes after class accept an object literal/object reference/array as a parameter.

Here, {active: isActive} is the object parameter, active is the class name, and isActive is a Boolean value. Here is an example:

Bind object literal

html:

<div id="classBind">
<span :class="{warning:isWarning,safe:isSafe}" v-on:click="toggle">
状态:{{alert}}{{isSafe}}
</span>
</div>
//js
var app11=new Vue({
el:&#39;#classBind&#39;,
data:{
isWarning:true,
alertList:[&#39;红色警报&#39;,&#39;警报解除&#39;],
alert:&#39;&#39;
},
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;
}

When you click the status text, you can switch the following text and color

// Status: Alert cleared true

//Status: Red alert false

Bound object reference

The bound object here can be written to the data of the Vue instance, and in class="classObj", the class in double quotes is A reference to the classObj object in the Vue instance. classObj can be placed in data or computed. If it is in computed, the function corresponding to classObj must return an object as follows:

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];
}
}
});

Bound array

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;
}

Effect, click to remove class, the removeClass function will be called to remove the last item of the classArray array. For the first time, 'red' is removed, and the font color is Red changes to black, click again, remove 'big', and the font size becomes smaller.

2. Bind inline style

At this moment, I am studying the Vue api document next to this page and selling it here. It feels so cool to show off o(^▽^)o

html

<div id="styleBind">
<span :style="{color:theColor,fontSize:theSize+&#39;px&#39;}" @click="bigger">styleBind</span>
</div>

css

This does not require css. . .

js

var app12=new Vue({
el:'#styleBind',
data:{
theColor:'red',
theSize:14
},
methods:{
bigger:function(){
this.theSize+=2;
}
}
});

In addition to passing in object literals, you can also pass in object references and arrays to V-bind:style