vue屬性綁定v-bind: · vue

## v-bind屬性的作用是將普通的w3c屬性變為動態屬性，讓屬性具有動態能力屬性綁定： html的是屬性綁定 ``` v-bind: 也可也簡化為 : ``` ``` <div v-bind:title="title">{{msg}}</div> 等同于- <div :title="title">{{msg}}</div> ``` ![](https://img.kancloud.cn/2c/c7/2cc73544ff12105dd64e3a15392039a3_943x424.png) ## 代碼案例以及語法： ~~~ <div id="box"> <div v-bind:title="title">{{msg}}</div> </div> </body> </html> <script type="text/javascript"> new Vue({ el:"#box", data:{ msg:"hello word", title:"你好呀我是抬頭" }, }) ~~~ 代碼案例： ``` <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="vue/vue.js"></script> <title></title> </head> <body> <div id="app"> <div> <img v-bind:src="'vue/images/'+url+'.jpg'" alt=""> </div> <button @click="add()" type="button">點擊我加1</button> <button @click="minus()" type="button">點擊我減1</button> </div> </body> <script> var vue=new Vue({ el:"#app", data:{ url:0 }, methods:{ add(event){ this.url ++ if(this.url>5){ this.url=0 } }, minus(event){ this.url-- if(this.url<=0){ this.url=5 } } } }) </script> </html> ``` ![](https://img.kancloud.cn/9b/c2/9bc2715a38c0843eb01c3cd0854bc57b_1964x1518.png) ## 使用動態屬性之前 ``` <img src="'images/'+url+'.jpg'" alt=""> ``` ![](https://img.kancloud.cn/55/57/555722be050d42d42076b8edb4597acc_940x532.png) ## 上面的圖片是加載不出來的，因為如果沒有使用動態屬性，會將編譯之前的屬性參數直接拋出 ## 此時使用v-bind: ``` <img v-bind:src="'images/'+url+'.jpg'" alt=""> ``` ## 此時vue會編譯帶有v-bind的屬性，然后返回編譯后結果 ![](https://img.kancloud.cn/88/d2/88d26c7bc88c02051104e682253b62c5_862x370.png) ## 可以將v-bind:簡寫為： ``` <img v-bind:src="'images/'+url+'.jpg'" alt=""> ``` //等同于下面的代碼 ``` <img :src="'images/'+url+'.jpg'" alt=""> ``` ## 我們可以使用動態屬性實現class類名的動態效果 ## //CSS樣式 ``` <style> p{ width: 200px; height: 200px; background: blue; } .red{ background:red; } .pink{ background: pink; } </style> //結構代碼 <div id="app" v-clock> <div> <p :class="{red:a >=5,pink: a>=10}"> {{a}} </p> </div> <button @click="add">點擊加1</button> <button @click="minus">點擊減1</button> </div> <script src = "js/vue.js"></script> <script> var vue = new Vue({ el: "#app", data: { a: 0 }, methods:{ add(event) { this.a ++ }, minus(){ this.a -- } } }) </script>p :class="{red:a >=5,pink: a>=10}"> {{a}} </p> ``` ## 需要注意的是動態的class必須要使用{}去包裹，值可以有多個，值的參數是一個布爾值 ![](https://img.kancloud.cn/89/a6/89a6594d1e9db69d84472dfaaa4ffda5_238x362.png) ## 除了class屬性可以實現動態外，style屬性可有對應的功能 ## style屬性和class屬性有特殊性，如果需要使用動態傳值，必須傳入一個object對象 ``` <p :style="{width:b+'px'}"> {{a}} </p> ``` ![](https://img.kancloud.cn/9c/e4/9ce4c65ed69ba44fe22d28c4335e0208_1150x443.png)