vue指令之-v-bind

本文轉載自查看原文 2021-09-13 10:39 142 vue學習

v-bind屬性的作用是將普通的w3c屬性變為動態屬性，讓屬性具有動態能力。

使用v-bind實現輪播圖

 1     <div id="app" v-clock>
 2         <div >          
 3             <img src="'images/'+url+'.jpg'" alt="">
 4         </div>
 5         <button @click="add">點擊加1</button>
 6         <button v-on:click="minus">點擊減1</button>
 7 
 8     </div>
 9     <script src = "js/vue.js"></script>
10     <script>
11        var vue = new Vue({
12                el: "#app",
13                data: {
14                   url:0
15                },
16                methods:{                  
17                    add() {
18                     this.url++
19 
20                     if(this.url>=4){
21                           this.url=0                                                           
22                        }
23                    },
24                    minus() {
25                        if(this.url<=0){
26                            this.url=5                                                             
27                        }
28                        this.url --;
29                    }
30                }
31        })
32     </script>

1 <img src="'images/'+url+'.jpg'" alt="">

這里只憑借字符串的方法來改變圖片地址是不行的

所以需要在其中加入v-bind屬性

1 <img v-bind:src="'images/'+url+'.jpg'" alt="">

此時頁面就可以實現輪播圖效果

v-bind可以簡寫為“：”

1 <img v-bind:src="'images/'+url+'.jpg'" alt="">
2 //等同於下面的代碼
3 <img :src="'images/'+url+'.jpg'" alt="">

可以使用v-bind動態屬性實現class類名的動態效果

 1  p{
 2         width: 200px;
 3         height: 200px;
 4         background-color: blue;
 5     }
 6     .red{
 7         background-color: red;
 8     }
 9     .pink{
10         background-color: pink;
11     }

 1    <div id="app" v-clock>
 2         <div >        
 3             <p :class="{red:a >=5,pink: a>=10}">
 4                {{a}}
 5            </p>
 6         </div>
 7         <button @click="add">點擊加1</button>
 8         <button v-on:click="minus">點擊減1</button>
 9     </div>
10     <script src = "js/vue.js"></script>
11     <script>
12        var vue = new Vue({
13                el: "#app",
14                data: {
15                   a:0,           
16                },
17                methods:{
18                    
19                    add() {
20                     this.a++
21 
22                    },
23                    minus() {
24 
25                        this.a --;
26                    }
27                }
28        })
29     </script>

此時可以實現class類名的動態效果

注意：是動態的class必須要使用{}去包裹，值可以有多個，值的參數是一個布爾值

除了class屬性可以實現動態外，style屬性可有對應的功能

style屬性和class屬性有特殊性，如果需要使用動態傳值，必須傳入一個object對象

1    <p :style="{width:a+'px'}">
2                 {{a}}
3             </p>

免責聲明！

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

猜您在找 vue---- v-bind指令 Vue中的v-bind指令 vue之v-bind 手寫vue中v-bind:style效果的自定義指令小知識：vue指令v-bind(:)綁定style樣式方式 Vue（九）：樣式綁定v-bind示例 vue v-bind 的prop屬性 VUE中 v-bind 用法 [Vue]Vue語法糖v-bind、v-on Vue框架（一）——Vue導讀、Vue實例（掛載點el、數據data、過濾器filters）、Vue指令(文本指令v-text、事件指令v-on、屬性指令v-bind、表單指令v-model)