Binding style and class list to vue. js learning notes

A common requirement for data binding is the class list of operation elements and its inline style. This article mainly introduces information about vue. js binding styles and classes. For more information, see the following section. A common requirement for data binding is the class list of operation elements and its inline styles. Because they are all attribute, we can use v-bind to process them: we only need to calculate the final string of the expression. However, String concatenation is troublesome and error-prone. Therefore, when v-bind is used for class and style, Vue. js specifically enhances it. The expression result type can be an object or an array in addition to a string.

1. Bind the Class attribute.

Use the v-bind: Command to bind data:

Syntax:

. Double quotation marks ("double quotation marks") after class are used as parameters, including the object literal volume, object reference, and array,

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

Number of bound objects

Html:

Status: {alert }}{{ isSafe }}
// Jsvar app11 = new Vue ({el: '# classBind', data: {isWarning: true, alertList: ['redalert ', 'alert release'], 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 status text, you can switch the text and color behind it.

// Status: true for alarm relief

// Status: red alarm false

Bind Object Reference

The bound object can be written to the data of the Vue instance. In class = "classObj", the class in double quotation marks is a reference to the classObj object in the Vue instance. ClassObj can be stored 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: ['redalert ', 'alert release'], 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 an array

Html:

Remove class

Js

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

Css:

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

Effect: Click remove class. The removeClass function is called to remove the last entry of the classArray array. For the first time, remove 'red'. The font color turns from red to black. Then, click "big" to remove it ', the font size becomes smaller.

2. bind an inline style

At this moment, I watched the Vue api document next to this page and sold it here, so I felt really cool o (^) o

Html

styleBind

Css

Css is not required...

Js

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

In addition to the object literal volume, you can also pass in the object reference and array to V-bind: style

The above is a small series of vue. binding style and class to js learning notes is helpful to everyone. If you have any questions, please leave a message and the editor will reply to you in time. I would like to thank you for your support for PHP chinnet!

For more articles about binding style styles and class lists to vue. js study notes, refer to PHP!