vue動態綁定屬性--基本用法及動態綁定class

本文轉載自查看原文 2022-04-13 11:06 780 vue

動態綁定屬性v-bind:，語法糖形式:省略v-bind，僅寫一個冒號。

一、動態綁定基本屬性

 1 <body>
 2   <!-- v-bind 動態綁定屬性-基本用法 -->
 3   <img v-bind:src="imgUrl" alt="">
 4   <script src="../js/vue.js"></script>
 5  　　<script>
 6      　setTimeout(function() {
 7        　const vm = new Vue({
 8          el: '#app',
 9          data: {
10            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650099133&t=7737c14262a80534f32b81b3210ae247',
11          },
12        });
13      },2000);
14    </script>
15 </body>

二、動態綁定class

（1）基本用法：

 1 <head>
 2   <style>
 3     .active{
 4       color: red;
 5     }
 6   </style>
 7 </head>
 8 
 9 <body>
10   <div id="app">
11 
12     <!-- v-bind動態綁定class--基本用法 -->
13     <div class="active">{{msg}}</div>
14     <div :class="on">{{msg}}</div>
15 
16   </div>
17   <script src="../js/vue.js"></script>
18   <script>
19     setTimeout(function() {
20       const vm = new Vue({
21         el: '#app',
22         data: {
23           msg: 'hello',
24           on: 'active',
25         }
26       });
27     },2000);
28   </script>
29 </body>

（2）對象語法：

　　a.語法格式：v-bind:class="{類名1:布爾值,類名2:布爾值}"

 1 <head>
 2   <style>
 3     .active{
 4       color: red;
 5     }
 6   </style>
 7 </head>
 8 
 9 <body>
10   <div id="app">
11 
12     <!-- v-bind動態綁定class--對象語法(使用較多) -->
13     <div :class="{active:isActive,line:isLine}">{{msg}}</div>
14 
15   </div>
16   <script src="../js/vue.js"></script>
17   <script>
18     setTimeout(function() {
19       const vm = new Vue({
20         el: '#app',
21         data: {
22           msg: 'hello',
23           isActive: false,
24           isLine: true,
25         }
26       });
27     },2000);
28   </script>
29 </body>
30

　　b.如果綁定的對象太長，可以放在方法或者是計算屬性中，將其返回，調用方法時必須加上括號

 1 <head>
 2   <style>
 3     .active{
 4       color: red;
 5     }
 6   </style>
 7 </head>
 8 
 9 <body>
10   <div id="app">
11 
12     <div :class="getClassesObj()">{{msg}}</div>
13  
14   </div>
15   <script src="../js/vue.js"></script>
16   <script>
17     setTimeout(function() {
18       const vm = new Vue({
19         el: '#app',
20         data: {
21           isActive: false,
22           isLine: true
23         },
24         methods: {
25           getClassesObj(){
26             return {active: this.isActive, line:this.isLine};
27           }
28         }
29       });
30     },2000);
31   </script>
32 </body>

（3）數組語法

 1 <head>
 2   <style>
 3     .active{
 4       color: red;
 5     }
 6   </style>
 7 </head>
 8 
 9 <body>
10   <div id="app">
11 
12     <!-- v-bind動態綁定class--數組語法(少) -->
13     <h1 :class="['active', 'line']"></h1>
14     <h1 :class="[active, line]">v-bind動態綁定class--數組語法(少)</h1>
15     <h1 :class="getClassesArr()">v-bind動態綁定class--數組語法(少)-方法</h1>
16    
17   </div>
18   <script src="../js/vue.js"></script>
19   <script>
20     setTimeout(function() {
21       const vm = new Vue({
22         el: '#app',
23         data: {
24           msg: 'hello',
25           active: 'aaa',
26           line: 'bbb',
27         },
28         methods: {
29           getClassesArr(){
30             return [this.active, this.line];
31           }
32         },
33       });
34     },2000);
35   </script>
36 </body>
37 
38 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue :class的動態綁定 vue動態綁定屬性--動態綁定style Vue中Class與Style如何動態綁定 vue中使用：class 動態綁定 vue 動態綁定 class style Vue.js 動態綁定class vue動態綁定類名 class vue動態綁定:class的幾種方式 vue style class 動態綁定 vue -- class & style動態綁定