在数据绑定中，最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动态绑定一、动态绑定href和src使用v-bind动态设置链接的 href 属性和图片的 src 属性，当数据变化时，就会重新渲染。代码：<!DOCTYPE html><html lang=“en”><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”> <title>Document</title></head><body> <!– v-bind的作用：绑定活的属性！！ –> <div id=“app”> <a v-bind:href=“url”>我是百度</a> <img :src=“imgUrl” alt=""> </div><script src=“https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> var app=new Vue({ el:’#app’, data:{ url:‘https://www.baidu.com’, imgUrl:‘https://www.baidu.com/img/bd_logo1.png' } })</script> </body></html>执行结果当我们改变url的值，a连接就指向了淘宝二、动态绑定 class 的几种方式1、普通绑定class2、class 对象语法给 vbind:class 设置一个对象，可以动态地切换 class。绑定class对象语法,对象的键是类名，值是布尔值.如果布尔值是true，代表该元素添加了对应的class，为false，则没有添加 <div :class="{divStyle :isActive,borderStyle:isBorderActive}"></div><!DOCTYPE html><html lang=“en”><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”> <title>Document</title> <style> .divStyle{ background-color: darkred; width: 100px; height: 100px; } .borderStyle{ border: 6px solid yellow; } </style></head><body> <div id=“app”> 绑定class对象语法,对象的键是类名，值是布尔值.如果布尔值是true，代表该元素添加了对应的class，为false，则没有添加 <div :class="{divStyle :isActive,borderStyle:isBorderActive}"></div> </div><script src=“https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> var app=new Vue({ el:’#app’, data:{ isActive:true, //代表给div添加了divstyle isBorderActive:true, } })</script> </body></html>当 class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时， 都可以使用 data 或 computed <style> .active{ background-color: black; width: 100px; height: 100px; } </style></head><body> <div id=“app”> <div :class=“classNames”>计算属性</div> </div><script src=“https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> var app=new Vue({ el:’#app’, data:{ isActive:true, //代表给div添加了divstyle isBorderActive:false }, computed:{ classNames:function(){ return { active:this.isActive&& !this.isBorderActive }//return一个对象，active是键名，值是布尔值，因为很复杂 } } })</script> 3、数组语法当需要应用多个 class 时， 可以使用数组语法 ， 给：class 绑定一个数组，应用一个 class列表：数组成员直接对应className–类名 <style> .active{ background-color: black; width: 100px; height: 100px; } .error{ border: 6px solid yellow; } </style></head><body> <div id=“app”> 绑定class数组语法,数组中的成员直接对应类名<br> <div style=“color:#fff” :class="[activeclass,errorclass]">我是数组绑定class</div> </div><script src=“https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> var app=new Vue({ el:’#app’, data:{ activeclass:‘active’, errorclass:’error’ } })</script> 4、数组和class对象混用——————看演示errorclass永远存在，active看情况存在 <style> .active{ background-color: black; width: 100px; height: 100px; } .error{ border: 6px solid yellow; } </style></head><body> 绑定class：<br> <div id=“app”> 数组和对象混用，第一个成员是对象，第二个成员是数组成员<br> <div style=“color:#fff” :class=”[{active:isActive},errorclass]">数组</div> </div><script src=“https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> var app=new Vue({ el:’#app’, data:{ isActive:true, errorclass:’error’ } })</script>5、 在组件上使用 : 暂时不考虑—挖坑三、绑定内联样式使用 vbind:style （即：style ） 可以给元素绑定内联样式，方法与 ：class 类似，也有对象语法和数组语法，看起来很像直接在元素上写 CSS:注意 : css 属性名称使用驼峰命名（ came!Case ）或短横分隔命名（ kebabcase），对象语法<div :style=”{‘color’:color,‘fontSize’:fontSize +‘px’}">数组</div>//注意要加px数组语法，很不常见，较为常用 的应当是计算属性</head><body> <div id=“app”> 对象语法绑定内联样式：键代表style的属性值，值代表属性对应的值了。<br> 驼峰写法：vue中只要是大写字母，就会给你转换成-和小写。<br> <div :style=”{‘color’:color,‘fontSize’:fontSize +‘px’}">数组</div> </div> <div id=“app2”> style数组语法绑定内联样式<br> <div :style="[styleA,styleB]">数组</div> </div><script src=“https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> var app=new Vue({ el:’#app’, data:{ color:‘red’, fontSize:16 } }) var app2=new Vue({ el:’#app2’, data:{ styleA:{ width:‘100px’, border:‘1px solid red’ }, styleB:{ color:‘blue’ } } })</script> 使用 :style 时， Vue .js 会自动给特殊的 css 属性名称增加前缀， 比如 transform 。无需再加前缀属性！！！
