vue.js study notes 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 all 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 the status text is clicked, you can Switch the following text and color

//Status: Alert lifted true

//Status: Red alert false

Bind object reference

Bind here A certain object 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];
}
}
});

Binding 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 the class , the removeClass function will be called to remove the last item of the classArray array. For the first time, remove 'red', and the font color will change from red to black. Then, remove 'big', and the font will become smaller.

2. Binding inline style

At this moment, I am looking at the Vue api documentation next to this page and selling it here. It feels so cool to pretend 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

The above The following is the binding style and class of vue.js study notes introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more vue.js study notes, binding style styles and class lists related articles, please pay attention to the PHP Chinese website!