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)