5.Vue操作样式 - 5.内嵌样式使用vue中元素 - 《Web 前端工程师-2022》

<html>
  <head>
    <style>
      .myclass
      {
        width: 100%;
        height: 80px;
        background-color: blue;
      }
      .red{
        background-color: red;
      }
      .blue{
        background-color: blue;
      }
      .yellow{
        background-color: yellow;
      }
      .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>
  加入v-model来控制
  <div class="myclass" :class="mycolor"></div>
  </br>
加入多个样式绑定
<div class="myclass" :class="[mycolor,mywidth]"></div>
</br>
内嵌样式使用vue中元素
<div class="myclass" :style="[myStyle1,{height:myheight+'px'}]"></div>
</br>
<button type="button" @click="tmp=!tmp"> 点我 </button>
<input type="text" v-model="mycolor"></input>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    //指定作用于那一个div
    el:'#app',
    //属性
    data:{
      tmp:false,
      mycolor:'yellow',
      mywidth:'width',
      myheight:200,
    },
    computed:{
      myclass1:function(){
        console.log(111);
        /*let tmp = {};
        if(this.tmp){
        tmp['backgroundColor'] = 'red';
        }*/
        return {
          red:this.tmp,
          width:this.tmp
        }
      },
      myStyle1:function(){
        let tmp = {};
        if(this.tmp){
          tmp.backgroundColor = 'red';
        }
        return tmp;
      }
    }
  });
</script>
</html>