vue指令之-v-bind

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>

 

posted @ 2021-09-13 10:39  keyeking  阅读(402)  评论(0)  编辑  收藏  举报