Vue起步_Vue中的样式绑定

第一种方式：class的对象绑定

<body>
  <div id="app">
    <div @click="handleDivClick"
         :class="{activated: isActivated}"
    >
       Hello World
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        isActivated: false
      },
      methods: {
        handleDivClick: function() {
          this.isActivated = !this.isActivated;
        }
      }
    })
  </script>
</body>

如果isActivated为true，则绑定class=“activated”

为activated绑定样式：

<style>
    .activated {
      color: red;
    }
  </style>

实现点击Hello World一次变红色，再点击一次变黑色。

第二种方式：class的数组绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的样式绑定</title>
  <script src="./vue.js"></script>
  <style>
    .activated {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <div @click="handleDivClick"
         :class="[activated]"
    >
       Hello World
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        activated: ""
      },
      methods: {
        handleDivClick: function() {
          this.activated = this.activated === "activated"?
            "" : "activated"
        }
      }
    })
  </script>
</body>
</html>

第三种方式：style的对象绑定

<body>
  <div id="app">
    <div @click="handleDivClick"
         :style="styleObj"
    >
       Hello World
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        styleObj: {
          color: "black"
        }
      },
      methods: {
        handleDivClick: function() {
          this.styleObj.color = this.styleObj.color === "black"?
            "red" : "black";
        }
      }
    })
  </script>
</body>

第四种方式：style的数组绑定

<body>
  <div id="app">
    <div @click="handleDivClick"
         :style="[styleObj,{fontSize: '20px'}]"
    >
       Hello World
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        styleObj: {
          color: "black"
        }
      },
      methods: {
        handleDivClick: function() {
          this.styleObj.color = this.styleObj.color === "black"?
            "red" : "black";
        }
      }
    })
  </script>
</body>

Vue起步_Vue中的样式绑定

猜你喜欢