Official Links

Class and Style Binding - Vue.js
https://cn.vuejs.org/v2/guide/class-and-style.html
Examples notes

Renderings

Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <script src="vue.js"></script>
  <style>
    .red {
      color: red;
    }

    .fontBig {
      font-size: larger;
    }
  </style>
</head>

<body> 
  < Div ID = "vueApp" > 
    < div : class = "Red {:} isRed" @click = "clickDiv1" > 
      class binding object wording: class = "{1 Class Name: true or false, the name of the class 2: True false} " 
    </ div > 
    < div : class =" [{Red: isRed}, fontClassName] " @click =" clickDiv2 " > 
      class bind array wording: class =" [Object, class variable name] " 
    </ div > 
    < div : style = "{the fontSize: fontSizeName, Color: colorName}" @click = "clickDiv3" > 
      style binding object wording:style = "JS Object" 
    </ div > 
    <div : style = "[baseStyleObj, colorStyleObj]" > 
      style bind array wording: style = "[JS Object 1, JS Object 2]" 
    </ div > 
  </ div > 
</ body > 
< Script > 
  // initialization VUE page 
  var VM =  new new Vue ({ 
    EL: " #vueApp " , 
    Data: { 
      isRed: to false , 
      fontClassName: " fontBig " , 
      colorName: " Black " , 
      fontSizeName:"small",
      baseStyleObj: {
        fontSize: "small",
      },
      colorStyleObj: {
        color: "red",
      }
    },
    watch: {
      fontSizeName: function (val) {
        this.baseStyleObj.fontSize = this.fontSizeName;
      },
      colorName: function (val) {
        this.colorStyleObj.color = this.colorName;
      }

    },
    methods: {
      clickDiv1: function () {
        this.isRed = !this.isRed;
      },
      clickDiv2: function () {
        this.isRed = !this.isRed;
      },
      clickDiv3: function () {
        if (this.colorName === "black") {
          this.colorName = "red";
        } else {
          this.colorName = "black";
        }

        if (this.fontSizeName === "small") {
          this.fontSizeName = "larger";
        } else {
          this.fontSizeName = "small";
        }
      }
    }
  });
</script>

</html>
[VUE] Binding Class and Style

Official Links

Examples notes

Renderings

Code

Guess you like
