5.Vue操作样式 - 2.加入computed控制样式 - 《Web 前端工程师-2022》

<html>
  <head>
    <style>
      .myclass
      {
        width: 100%;
        height: 80px;
        background-color: blue;
      }
      .red{
        background-color: red;
      }
      .width{
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      通过v-bind控制样式
      <div class="myclass" v-bind:class="{red:tmp}"> </div>
      </br>
    加入computed来控制
    <div class="myclass" :class="myclass1"></div>
    </br>
  <div class="myclass"></div>
  </br>
<button type="button" @click="tmp=!tmp"> 点我 </button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    //指定作用于那一个div
    el:'#app',
    //属性
    data:{
      tmp:false
    },
    computed:{
      myclass1:function(){
        console.log(111);
        return {
          red:this.tmp,
          width:this.tmp
        }
      }
    }
  });
</script>
</html>