vue中样式的典型操作(:class,:style)

 <template>
     <div class="home-wrapper">
       <div class="home-top">this is from Home.vue</div>
       <!--num>10,背景颜色红色，否则橙色-->
       <div class="test" :class="num>10? bgColor1: bgColor2">this is a test,num is : {{num}}</div>
       <button @click="changeNum">click to change num</button>
       <div class="test2" :style="{fontSize: fontSize+ 'px'}">this is test2</div>
       <button @click="changeTest2FontSize">click to change fontSize</button>
     </div>
 </template>

 <script>
 export default {
   name: 'Home',
   data () {
     return {
       num: '',
       bgColor1: 'bgColor1',
       bgColor2: 'bgColor2',
       fontSize: 10
     }
   },
   methods: {
     changeNum () {
       this.num = Math.floor(Math.random() * 20)
       console.log(this.num)
     },
     changeTest2FontSize () {
       if (this.fontSize < 30) {
         this.fontSize = 30
       } else {
         this.fontSize = 15
       }
     }
   }
 }
 </script>

 <style lang="scss" scoped>
 .home-wrapper{
   width: 80%;
   display: flex;
   align-items: center;
   flex-direction: column;
   .home-top{
     width: 300px;
     height: 100px;
   }
   .bgColor1{
     background-color: red;
   }
   .bgColor2{
     background-color: orange;
   }
   .test{
     width: 300px;
     height: 200px;
   }
 }

 </style>

代码如上！