class与style绑定

绑定class样式

字符串写法

适用于：样式的类名不确定，需动态指定

数组写法

适用于：要绑定的样式个数不确定、名字也不确定

对象写法

适用于：要绑定的样式确定、名字也确定，但需动态决定是否应用

绑定style样式

对象写法

数组写法

<div id="app">
    <h2>class绑定样式</h2>
    //字符串写法
  <div class="test" :class="mood" @click="changeMood">{{name}}</div><br><br>
  //数组写法
  <div class="test" :class="classArr">{{name}}</div><br><br>
  //对象写法
  <div class="test" :class="classObj">{{name}}</div><br><hr>
  <h2>style绑定样式</h2>
  //对象写法
  <div class="test" :style="styleObj">{{name}}</div><br><br>
  //数组写法
  <div class="test" :style="[styleObj,styleObj1]">{{name}}</div><br><br>
</div>
<script>
  Vue.config.productionTip = false;
  var vm = new Vue({
    el: "#app",
    data: {
      name: "测试",
      mood: "txt2",
      classArr: ["test1", "test2", "test3"],
      classObj:{
        test1:false,
        test2:false
      },
      styleObj:{
        fontSize:'40px',
      },
      styleObj1:{
        backgroundColor:'orange'
      }
    },
    methods: {
      changeMood() {
        // this.mood='txt3'
        const arr = ["txt1", "txt2", "txt3"];
        const index = Math.floor(Math.random() * 3);
        this.mood = arr[index];
      },
    },
  });
</script>