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>