vue.js learning notes: binding style and class list

A common requirement for data binding is to operate the class list of an element and its inline styles. Because they are all attributes, we can use v-bind handles them: you just need to calculate the final string of the expression. However, string concatenation is麻烦 and prone to errors. Therefore, in v-When bind is used with class and style, Vue.js has specially enhanced it. The result type of the expression can be a string, an object, or an array.

1. Binding Class Attribute.

Binding data with v-bind:command, abbreviated as:

Syntax: <div v-bind:class="{ active: isActive }"></div> The double quotes after class accept an object literal/Object reference/Array as a parameter,

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

binding object literal

html：

<div id="classBind">
<span :class="{warning:isWarning,safe:isSafe}" v-on:click="toggle">}}
Status: {{alert}}{{isSafe}}
</span>
</div>
//js
var app11=new Vue({
el:'#classBind',
data:{
isWarning:true,
alertList:['Red Alert','Alert Canceled'],
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;
}

When you click the status text, you can switch the text and color behind it

//Status: Alert Canceled true

//Status: Red Alert false

bind object reference

The object bound here can be written in the Vue instance's data, and in class="classObj ", the double quotes in the class refer to the classObj object in the Vue instance.classObj can be placed in data or computed, if it is in computed, then the function corresponding to classObj must return an object as follows:

js:

var app11=new Vue({
el:'#classBind',
data:{
isWarning:true,
alertList:['Red Alert','Alert Canceled'],
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];
}
}
});

bind array

html:

<div v-bind:class="classArray" @click="removeClass()">remove class</div>

js

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

css:

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

The effect is that when you click to remove the class, the removeClass function is called, removing the last item from the classArray array. First, 'red' is removed, changing the font color from red to black, and then click to remove 'big', making the font smaller.

Second, binding inline style

At this moment, I am learning the Vue api document next to this page while selling here, and it feels really cool o(^▽^)o

html

<div id="styleBind">
<span :style="{color:theColor,fontSize:theSize+'px' @click="bigger">styleBind</span>
</div>

css

This does not need css...

js

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

In addition to passing an object literal, you can also pass an object reference and an array to V-bind:style

The above is the vue.js learning notes introduced by the editor about binding style and class, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. Here, I also want to express my sincere gratitude to everyone for supporting the Yelling tutorial website!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)