vue 绑定class、v-bind:style(对象语法、数组语法)

绑定 HTML Class

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

内联样式在模板里

复制代码
 1  <div id="div1" :class="{active: isActive, 'text-danger': hasError}"></div>
 2   <script type="text/javascript">
 3         var vm1 = new Vue({
 4             el: "#div1",
 5             data: {
 6                 isActive: true,
 7                 hasError: true,
 8             }
 9         })
10  </script>
11 
12 
13 
14 // 预览
15 <div id="div1" class="active text-danger"></div>
复制代码

内联样式不在模板里

复制代码
 1   <div id="div2" :class="class_obj"></div>
 2 
 3     <script type="text/javascript">
 4         var vm2 = new Vue({
 5             el: "#div2",
 6             data: {
 7                 class_obj: {
 8                     isActive: true,
 9                     hasError: true,
10                 }
11             }
12         })
13     </script>
14 ————————————————
15 // 预览
16 <div id="div2" class="isActive hasError"></div>
复制代码

绑定返回对象的计算属性

复制代码
 1     <div id="div3" v-bind:class="classObject"></div>
 2 
 3     <script type="text/javascript">
 4         var vm3 = new Vue({
 5             el: "#div3",
 6             data: {
 7                 isActive: true,
 8                 error: true
 9             },
10             computed: {
11                 classObject: function () {
12                     return {
13                         active: this.isActive && this.error,
14                         'text-danger': this.error
15                     }
16                 }
17             }
18         })
19     </script>
20 ————————————————
21 
22 // 预览
23 
24 <div id="div3" class="active text-danger"></div>
复制代码

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

class 列表

复制代码
 1  <div id="div4" v-bind:class="[activeClass, errorClass]"></div>
 2     <script type="text/javascript">
 3         new Vue({
 4             el: "#div4",
 5             data: {
 6                 activeClass: 'active',
 7                 errorClass: 'text-danger'
 8             }
 9         })
10     </script>
11 ————————————————
12 
13 // 预览
14 
15 <div id="div4" class="active text-danger"></div>
复制代码

 

class 列表使用三元表达式

如果你也想根据条件切换列表中的 class，可以用三元表达式：

复制代码
 1 <div id="div5" v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
 2 <script type="text/javascript">
 3     new Vue({
 4         el: "#div5",
 5         data: {
 6             isActive: true,
 7             activeClass: 'active',
 8             errorClass: 'text-danger'
 9         }
10     })
11 </script>
12 ————————————————
13 
14 // 预览
15 
16 <div id="div5" class="active text-danger"></div>
复制代码

 

class 列表使用对象语法

复制代码
 1  <div id="div6" v-bind:class="[{ active: isActive }, errorClass]"></div>
 2     <script type="text/javascript">
 3         new Vue({
 4             el: "#div6",
 5             data: {
 6                 isActive: true,
 7                 errorClass: 'text-danger'
 8             }
 9         })
10     </script>
11 ————————————————
12 
13 // 预览
14 
15 <div id="div6" class="active text-danger"></div>
复制代码

 

class 综合练习

复制代码
 1 <style>
 2     .red {
 3       color: red;
 4     }
 5 
 6     .thin {
 7       font-weight: 200;
 8     }
 9 
10     .italic {
11       font-style: italic;
12     }
13 
14     .active {
15       letter-spacing: 0.5em;
16     }
17   </style>
18 
19 
20 
21 <body>
22   <div id="app">
23     <h1 class="red thin">这是一个很大很大的H1，大到你无法想象！！！</h1>
24 
25     <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定 -->
26     <h1 :class="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1>
27 
28     <!-- 在数组中使用三元表达式 -->
29     <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1>
30 
31     <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->
32     <h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1>
33 
34     <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->
35     <h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1>
36 
37 
38   </div>
39 
40   <script>
41     // 创建 Vue 实例，得到 ViewModel
42     var vm = new Vue({
43       el: '#app',
44       data: {
45         flag: true,
46         classObj: { red: true, thin: true, italic: false, active: false }
47       },
48       methods: {}
49     });
50   </script>
51 </body>
复制代码

 

复制代码
 1 我们可以把一个数组传给 v-bind:class，以应用一个 class 列表
 2 
 3 <div id="div4" v-bind:style="[baseStyles, overridingStyles]">{{ msg }}</div>
 4 <script type="text/javascript">
 5     new Vue({
 6         el: "#div4",
 7         data: {
 8             msg: "我是数组绑定方法",
 9             baseStyles: {
10                 color: 'green',
11                 fontSize: '30px'
12             },
13             overridingStyles: {
14                 'font-weight': 'bold'
15             }
16         }
17     })
18 </script>

 

posted @ 2022-03-05 18:09  八月正凉  阅读(215)  评论(0)    收藏  举报