vue里的样式添加之类名改动和style改动-CSDN博客

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

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]'

 1  .div {
 2             height: 100px;
 3             width: 100px;
 4             background: yellow
 5         }
 6         .circle {
 7             border-radius: 50%
 8         }
 9     </style>
10     <script src="vue.js"></script>
11 </head>
12 
13 <body>
14     <div id="app">
15         <div class="div" v-bind:class={circle:isCircle}></div>
16         <button v-on:click='isCircle=!isCircle'>click</button>
17     </div>
18 
19     <script>
20         var vm = new Vue({
21             el: '#app',
22             data: {
23                 isCircle: true
24             }
25 
26         })