v-bind得使用目得：對標簽內屬性賦值時可以使用data中得變量（會動態(tài)改變或者說動態(tài)處理屬性值）。
v-bind指令用法：
<a v-bind:href="url"> 跳轉 </a>
v-bind縮寫形式：
<a :href="url"> 跳轉 </a>
<!DOCTYPE html><html lang="en"><body> <div id="app"> <a v-bind:href="url">百度</a> </div> <script type="text/javascript" src=http://www.hbruiju.com/skin/m04blueskin/image/nopic.gif <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ url:'特別baidu' } }); </script></body></html>
v-model得底層實現原理
v-model指令得本質：其實相當于是v-bind,v-on得結合
用v-bind去綁定屬性值，將data中初始化得值顯示在輸入框中；再通過input事件處理值得變化，使輸入框中新得值覆蓋掉原來得值。所以，
v-bind得作用使通過數據域（model）得變化導致輸入域（view）層跟著變化；v-on得作用是輸入域（view）層得變化導致數據域（model）層跟著發(fā)生變化；這樣就實現了雙向數據綁定。
<!DOCTYPE html><html lang="en"><body> <div id="app"> <input type="text" v-bind:value="msg" v-on:input='handle'> <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'> <input type="text" v-model:value="msg"> <div>{{msg}}</div> </div> <script type="text/javascript" src=http://www.hbruiju.com/skin/m04blueskin/image/nopic.gif <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ msg:'hello' }, methods:{ handle:function(event){ this.msg = event.target.value; } } }); </script></body></html>2、樣式綁定
2.1 class樣式處理
對象語法：
<div v-bind:class="{warn:isWarn, error:isError,.....}"></div>
完整代碼：
<!DOCTYPE html><html lang="en"><head> <style type="text/css"> .warn { border: 1px solid red; width:100px; height: 50px; } </style></head><body> <div id="app"> <div v-bind:class="{warn:isWarn}">警告提示</div> <button v-on:click="handle">切換</button> </div> <script type="text/javascript" src=http://www.hbruiju.com/skin/m04blueskin/image/nopic.gif <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ isWarn:true }, methods:{ handle:function(){ this.isWarn = !this.isWarn; } } }); </script></body></html>
數組語法：
<div v-bind:class="[warnClass, errorClass]"></div>
完整樣例：
<!DOCTYPE html><html lang="en"><head> <style type="text/css"> .warn { border: 1px solid red; width:100px; height: 50px; } .error { background-color: yellow; } </style></head><body> <div id="app"> <div v-bind:class="[warnClass, errorClass]">警告提示</div> <button v-on:click="handle">清空樣式</button> </div> <script type="text/javascript" src=http://www.hbruiju.com/skin/m04blueskin/image/nopic.gif <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ warnClass:'warn', errorClass:'error' }, methods:{ handle:function(){ this.warnClass = ''; this.errorClass = ''; } } }); </script></body></html>
class綁定事件得相關細節(jié)
對象語法和數組語法結合使用
比如，在以上數組語法得例子得基礎上加一個對象語法
<!DOCTYPE html><html lang="en"><head> <style type="text/css"> .warn { border: 1px solid red; width:100px; height: 50px; } .error { background-color: yellow; } .other { color:blue; } </style></head><body> <div id="app"> <div v-bind:class="[warnClass, errorClass,{other:active}]">警告提示</div> <button v-on:click="handle">清空樣式</button> </div> <script type="text/javascript" src=http://www.hbruiju.com/skin/m04blueskin/image/nopic.gif <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ warnClass:'warn', errorClass:'error', active:true }, methods:{ handle:function(){ this.warnClass = ''; this.errorClass = ''; this.active = false; } } }); </script></body></html>
class綁定得值可以簡化操作（數組和對象形式得）,使代碼得可讀性好
<!DOCTYPE html><html lang="en"><head> <style type="text/css"> .warn { border: 1px solid red; width:100px; height: 50px; } .error { background-color: yellow; } .other { color:blue; } </style></head><body> <div id="app"> <div v-bind:class="arrClass">數組簡化</div> <div v-bind:class="objClass">對象簡化</div> </div> <script type="text/javascript" src=http://www.hbruiju.com/skin/m04blueskin/image/nopic.gif <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ arrClass:['warn','error'], objClass:{ other:true } } }); </script></body></html>
默認得class會被保留，比如以下默認得base樣式
<!DOCTYPE html><html lang="en"><head> <style type="text/css"> .warn { border: 1px solid red; width:100px; height: 50px; } .error { background-color: yellow; } .other { color:blue; } .base { font-size: 25px; } </style></head><body> <div id="app"> <div class="base" v-bind:class="arrClass">數組簡化</div> </div> <script type="text/javascript" src=http://www.hbruiju.com/skin/m04blueskin/image/nopic.gif <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ arrClass:['warn','error'], } }); </script></body></html>
2.2 style樣式處理（樣式綁定之內聯(lián)樣式style）
對象語法：
<div v-bind:style='{border:borderStyle}'>對象語法</div>
完整代碼：
<!DOCTYPE html><html lang="en"><head></head><body> <div id="app"> <div v-bind:style='{border:borderStyle,width:widthStyle,height:heightStyle}'>對象語法</div> </div> <script type="text/javascript" src=http://www.hbruiju.com/skin/m04blueskin/image/nopic.gif <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ borderStyle:'1px solid red', widthStyle:'100px', heightStyle:'100px' } }); </script></body></html>
style對象語法得簡寫形式：
<!DOCTYPE html><html lang="en"><head></head><body> <div id="app"> <div v-bind:style='objStyle'>對象語法簡寫</div> </div> <script type="text/javascript" src=http://www.hbruiju.com/skin/m04blueskin/image/nopic.gif <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ objStyle:{ border:'1px solid red', width:'100px', height:'100px' } } }); </script></body></html>
數組語法:
<div v-bind:style='[objStyle,otherStyle]'>數組語法</div>
完整代碼：
<!DOCTYPE html><html lang="en"><head></head><body> <div id="app"> <div v-bind:style='[objStyle,otherStyle]'>數組語法</div> </div> <script type="text/javascript" src=http://www.hbruiju.com/skin/m04blueskin/image/nopic.gif <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ objStyle:{ border:'1px solid red', width:'100px', height:'100px' }, otherStyle:{ border:'1px solid red', backgroundColor:'blue' } } }); </script></body></html>
