1. <html>
    2.   <head>
    3.     <style>
    4.       .myclass
    5.       {
    6.         width: 100%;
    7.         height: 80px;
    8.         background-color: blue;
    9.       }
    10.       .red{
    11.         background-color: red;
    12.       }
    13.       .blue{
    14.         background-color: blue;
    15.       }
    16.       .yellow{
    17.         background-color: yellow;
    18.       }
    19.       .width{
    20.         width: 100px;
    21.       }
    22.     </style>
    23.   </head>
    25.   <body>
    26.     <div id="app">
    27.       通过v-bind控制样式
    28.       <div class="myclass" v-bind:class="{red:tmp}"> </div>
    29.       </br>
    30.     加入computed来控制
    31.     <div class="myclass" :class="myclass1"></div>
    32.     </br>
    33.   加入v-model来控制
    34.   <div class="myclass" :class="mycolor"></div>
    35.   </br>
    36. <button type="button" @click="tmp=!tmp"> 点我 </button>
    37. <input type="text" v-model="mycolor"></input>
    38. </div>
    39. </body>
    41. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    42. <script>
    43.   new Vue({
    44.     //指定作用于那一个div
    45.     el:'#app',
    46.     //属性
    47.     data:{
    48.       tmp:false,
    49.       mycolor:'yellow'
    50.     },
    51.     computed:{
    52.       myclass1:function(){
    53.         console.log(111);
    54.         return {
    55.           red:this.tmp,
    56.           width:this.tmp
    57.         }
    58.       }
    59.     }
    60.   });
    61. </script>
    62. </html>