v-bind和v-model的區別

簡單來講，區別以下：
1.v-bind用來綁定數據和屬性以及表達式，縮寫爲'：'
2.v-model使用在表單中，實現雙向數據綁定的，在表單元素外使用不起做用

1、v-model

v-model多在表單中使用，在表單元素上建立雙向綁定，根據控件類型選擇正確的方法更新元素，能夠綁定text、radio、checkbox、selected

1. 綁定text

<input type="text" v-model="val" />
<p> {{val}} </p>

2. 綁定radio

<input type="radio" value="one" v-model="radioVal" />
<input type="radio" value="two" v-model="radioVal" />
<label for v-bind="radioval" />

radioval的值隨着選擇單選框的值，會變成one 或者 two

3. 綁定checkBox

（1）單個勾選框，最終的值爲邏輯值true和false

<input type="checkbox" v-model="checkVal"/>
<label for="checkbox">{{checkVal}}</label>

（2）多個勾選框時，將值綁定到一個數組

<input type="checkbox" value="apple" v-model="checkArray"/>
<label for="checkbox">{{apple}}</label>

<input type="checkbox" value="banana" v-model="checkArray"/>
<label for="checkbox">{{banana}}</label>

<input type="checkbox" value="pear" v-model="checkArray"/>
<label for="checkbox">{{pear}}</label>

<span>{{checkArray | json}}</span>

checkArray中的值會根據是否選中進行關聯變化

4. 綁定select

（1）綁定到單個select
（2）綁定多個select時，一樣適用數組

5. 增長參數

（1）lazy
將輸入框的input事件改成change事件，使得輸入框在change事件中更新而不是input
關於change事件和input事件的區別，簡單說來是：
change事件必須是在輸入框失去焦點以後纔會觸發，而input事件能夠實時監測。

（2）number
將文本框輸入的值都變爲數字，若是是變爲數字以後是NAN，則返回原始值

（3）debounce
給輸入框加一個很小的延遲，設置一個最小的延時，在每次敲擊以後延時同步輸入框的值與數據。若是每次更新都要進行高耗操做（例如在輸入提示中 Ajax 請求），它較爲有用。
注意 debounce 參數不會延遲 input 事件：它延遲「寫入」底層數據。所以在使用 debounce 時應當用 vm.$watch() 響應數據的變化。若想延遲 DOM 事件，應當使用 debounce 過濾器。

---

2、v-bind

1.綁定文本

直接用v-bind或者{{}}

<p v-bind="message"></p>
<p>{{message}}</p>

2.綁定屬性

<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>

3.綁定表達式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

4.綁定html

<div>{{{ raw_html }}}</div>

這個時候必需要使用三個{}

參考：https://v1-cn.vuejs.org/guide...

此文章僅僅是整理，在往後的學習和工做中，有新的idea會同步更新。