Vue的样式绑定

<div id="app">

        <!--1. class的对象绑定方式 对象方式{} -->
        <!-- activadted 是class名称，isActivated是变量属性 -->
        <!-- activadted是否显示有变量isActivated来决定 -->
         <div @click='handleClick'
         :class="{activadted:isActivated}" 
         >Hello World</div>

        <!--2. class的数组绑定方式 [] -->
        <!-- activadted 和activadtedOne是两个变量，class的内容将是这两个变量的值-->
         <div @click='handleClick'
         :class="[activadted,activadtedOne]" 
         >Hello World</div>

         <!-- style样式对象绑定，styleObj是一个变量名称 -->
         <div @click='handleClick'
         :style="styleObj" 
         >Hello World</div>

         <!-- style样式数组绑定，styleObj是一个变量名称 -->
         <div @click='handleClick'
         :style="[styleObj,{fontSize:'20px'}]" 
         >Hello World</div>
    </div>

 <script>
     var Vm=new Vue({
         el:'#app',
         data:{
            isActivated:false,
            activadted:'activadted',
            activadtedOne:'activadted_one',
            styleObj:{
                color:"black"
            }
         }  
     })
    </script>