Vue.js binding class and Style style (6) _javascript tips

A common requirement for data binding is the class list of action elements and its inline style. Because they are all attributes, we can use V-bind to deal with them: only the final string of the expression is computed. However, string concatenation is cumbersome and error-prone. As a result, vue.js specifically enhances v-bind when it is used for class and style. The result type of an expression can be an object or an array, in addition to a string.

To bind to style or class by V-bind:class or: Class

Binding class

<div class= "Test" >
  <div:class= "{ACTIVE:ISACTIVE,CC:ISCC}" ></div>
 </div>

JS Code

 var Myvue = new Vue ({
    el:. Test ",
    data: {
      isactive:true,
      iscc:false
    },
  });

Or the following code can also be implemented

 <div class= "Test" >
    <div:class=classObject></div>
  </div>

JS Code

var Myvue = new Vue ({
    el:. Test ",
    data: {
      classobject:{
        active:true}}
  );

Bind class with several groups

  <div class= "Test" >
    <div:class= "[Activeclass,error]" >dsdsd</div>
  </div>

JS Code

 var Myvue = new Vue ({
    el:. Test ",
    data: {
      activeclass:" Active ",
      Error:" DDD "
    },
  });

Binding Style Property

<div class= "Test" >
    <div:style=styleObject>dsdsd</div>
  </div>

JS Code

  var Myvue = new Vue ({
    el:. Test),
    data: {
      styleobject:{
       color: "Red",
        fontsize: "30px"
      }
    },
  });

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.