vue里的样式添加之类名改动 和style改动

类名下有不同样式，通过增加或者减少类名，来增加或减少样式。

v-bind：class = {类名：变量，类名：变量。。。}  变量为布尔值，如果是true则类名添加，反正类名不添加到该元素身上

v-bind：class =“ [‘类名1’，‘类名2’，。。。]”(字符串代表数据类名)

v-bind: class=“[变量名，变量名2]”

v-bind：class = [类名1，类名2，{类名3：变量}。。。]

style的数据绑定和class一致，

：style=‘变量名’；

：style= '[变量名1, 变量名2]'

  .div {
             height: 100px;
             width: 100px;
             background: yellow
         }
         .circle {
             border-radius: 50%
         }
     </style>
     <script src="vue.js"></script>
 </head>

 <body>
     <div id="app">
         <div class="div" v-bind:class={circle:isCircle}></div>
         <button v-on:click='isCircle=!isCircle'>click</button>
     </div>

     <script>
         var vm = new Vue({
             el: '#app',
             data: {
                 isCircle: true
             }

         })