关于v-bind绑定class的实例
作用：可用于不同样式之间的切换
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script src="https://unpkg.com/vue"></script>
7 <style>
8 .static {
9 font-size: 120px;
10 width: 600px;
11 margin: 0 auto;
12 background-color: yellow;
13 height: 120px;
14 line-height: 120px;
15 text-align: center;
16 }
17
18 .class-a {
19 color: #FF0000;
20 }
21
22 .class-b {
23 text-decoration: underline;
24 }
25 </style>
26 </head>
27
28 <body>
29 <div id="app">
30 <div v-bind:class="classObject">
31 关于class的绑定
32 </div>
33 </div>
34 <script>
35 var vm = new Vue({
36 el: ‘#app‘,
37 data: {
38 classObject: {
39 //‘class-a‘,不能写成class-a（不带引号）；这里的classObject是js对象，而class-b是代表的是一个样式，所以必须写成‘class-a‘,用引号括起来。
40 //否则这里的class-a只能代表classObject的一个属性名称而已，这样vuejs在初始化时，会报错。
41 ‘class-a‘:true,
42 ‘class-b‘: false
43 }
44 }
45 });
46 </script>
47 </body>
48
49 </html>
时间： 2024-11-07 19:48:36