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>
