v-bind · web前端

# v-bind v-bind是处理HTML中的标签属性的，例如`<div></div>`就是一个标签，`<img>`也是一个标签，我们绑定`<img>`上的src进行动态赋值 ~~~ <div id="app"> <img v-bind:src="imgSrc" width="200px"> </div> ~~~ 在html中我们用`v-bind:src=”imgSrc”`的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。 ~~~ var app=new Vue({ el:'#app', data:{ imgSrc:'http://fv-static.b0.upaiyun.com/uploads/598fdba8dd4e4.jpeg' } }) ~~~ 缩写 ~~~  <a v-bind:href="url"></a>  <a :href="url"></a> ~~~ 绑定CSS样式在工作中我们经常使用v-bind来绑定css样式：在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。 1. 直接绑定class样式 ~~~ <div :class="className">1、绑定classA</div> <style> .classA { color: red; } </style> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { className: 'classA' } }) </script> ~~~ 2. 绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。 ~~~ <div :class="{classA:isOk}">2、绑定class中的判断</div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { className: 'classA', isOk: false, } }) </script> ~~~ 配合v-model来个双向数据绑定 ~~~ <div id="app"> <div :class="{classA:isOk}">绑定class</div> <input type="checkbox" id="isOk" v-model="isOk" /> <label for="isOk">isOk={{isOk}}</label> </div> <style> .classA { color: red; } </style> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { className: 'classA', isOk: false, } }) </script> ~~~ 3. 绑定class中的数组 ~~~ <div id="app"> <div :class="[classA,classB]">绑定class</div> </div> <style> .classA { color: red; } .classB { font-size: 50px } </style> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { classA: 'classA', classB: 'classB', } }) </script> ~~~ 4. 绑定class中使用三元表达式判断 ~~~ <div id="app"> <div :style="isOk?classA:classB">绑定class</div> </div> <style> .classA { color: red; } .classB { font-size: 50px } </style> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { classA: 'classA', classB: 'classB', isOk: false, } }) </script> ~~~ 5. 绑定style ~~~ <div id="app"> <div :style="{color:red,fontSize:font}">绑定class</div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { red: 'blue', font: '20px', } }) </script> ~~~ 6. 用对象绑定style样式 ~~~ <div id="app"> <div :style="styleObject">绑定class</div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { styleObject: { color: 'green', //注意这边不要写font-size,要把后面的变大写,vue的坑 fontSize: '20px', } } }) </script> ~~~