Vue核心语法第十一篇：绑定样式

前言

样式绑定除了class还有style，我们从两者出发去讲。

一：绑定Class样式

目标：动态绑定、切换class样式

注意：class是默认的，:class是vue语法，vue会将两者合并。但是style没这待遇。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绑定样式</title>

  <script type="text/javascript" src="../../js/vue.js"></script>
  <style>
    .basic {
      width: 1000px;
      height: 500px;
    }

    .red {
      background-color: red;
      font: 900;
    }

    .green {
      background-color: green;
    }

    .a1 {
      background-color: green;
    }

    .a2 {
      background-color: green;
    }

    .a3 {
      background-color: green;
    }
  </style>

</head>

<body>

  <div id="root">
    <!-- v-bind绑定class样式-字符串写法。适用于：样式类名不确定，需要动态指定的情况 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
    <!-- v-bind绑定class样式-数组写法。适用于要绑定的样式个数不确定，名字也不确定。 -->
    <div class="basic" :class="arr" @click="changeMood1">{{name}}</div>
    <!-- v-bind绑定class样式-数组写法。适用于要绑定的个数确定，名字不确定。 -->
    <div class="basic" :class="[a,b,c]" @click="changeMood1">{{name}}</div>
    <!-- v-bind绑定class样式-对象写法。适用于要绑定的元素确定，是否启动不确定。 -->
    <div class="basic" :class="classObj" @click="changeMood1">{{name}}</div>
  </div>

  <script>
    Vue.config.productionTip = false

    const vm = new Vue({
      el: '#root',
      data: {
        name: "hello",
        mood: "green",
        arr: ["a1", "a3"],
        a: "red",
        b: "green",
        c: "a2",
        classObj:{
          a1:false,
          a2:true
        }
      },
      methods: {
        changeMood() {
          console.log("点击事件执行了")
          this.name = 'baby';
          this.mood = 'red';

          // 生成随机数字([0,1)成3之后再取整。)
          Math.floor(Math.random() * 3);
        },
        changeMood1() {
          console.log("点击事件执行了")
          this.arr.push("a2");

          // 生成随机数字([0,1)成3之后再取整。)
          Math.floor(Math.random() * 3);
        }
      }
    })
  </script>

</body>

</html>

二：绑定style样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绑定样式</title>

  <script type="text/javascript" src="../../js/vue.js"></script>
  <style>
    .basic {
      width: 1000px;
      height: 500px;
    }

    .red {
      background-color: red;
      font: 900;
    }

    .green {
      background-color: green;
    }

    .a1 {
      background-color: green;
    }

    .a2 {
      background-color: green;
    }

    .a3 {
      background-color: green;
    }
  </style>

</head>

<body>

  <div id="root">
    <!-- v-bind绑定class样式-字符串写法。适用于：样式类名不确定，需要动态指定的情况 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
    <!-- v-bind绑定class样式-数组写法。适用于要绑定的样式个数不确定，名字也不确定。 -->
    <div class="basic" :class="arr" @click="changeMood1">{{name}}</div>
    <!-- v-bind绑定class样式-数组写法。适用于要绑定的个数确定，名字不确定。 -->
    <div class="basic" :class="[a,b,c]" @click="changeMood1">{{name}}</div>
    <!-- v-bind绑定class样式-对象写法。适用于要绑定的元素确定，是否启动不确定。 -->
    <div class="basic" :class="classObj" @click="changeMood1">{{name}}</div>

    <!-- fontSize是font-size中间-转大写即可。fsize是vue中的变量 -->
    <!-- 这块是表达式。 当然一般不这么写-->
    <div class="basic" :style="{fontSize: fsize+'px'}" @click="changeMood1">{{name}}</div>
    <!-- 这块就是纯对象了，改起来更方便 -->
    <div class="basic" :style="styleObj" @click="changeMood1">{{name}}</div>


  </div>

  <script>
    Vue.config.productionTip = false

    const vm = new Vue({
      el: '#root',
      data: {
        name: "hello",
        mood: "green",
        arr: ["a1", "a3"],
        a: "red",
        b: "green",
        c: "a2",
        classObj: {
          a1: false,
          a2: true
        },
        fsize: 40,
        // 这些属性都来自于css中的key
        styleObj: { fontSize: "40px", color: "red", backgroudColor: "yellow" }
      },
      methods: {
        changeMood() {
          console.log("点击事件执行了")
          this.name = 'baby';
          this.mood = 'red';

          // 生成随机数字([0,1)成3之后再取整。)
          Math.floor(Math.random() * 3);
        },
        changeMood1() {
          console.log("点击事件执行了")
          this.arr.push("a2");

          // 生成随机数字([0,1)成3之后再取整。)
          Math.floor(Math.random() * 3);
        }
      }
    })
  </script>

</body>

</html>