本文實例講述了vue.js數據綁定操作。分享給大家供大家參考，具體如下：

數據綁定

響應式的數據綁定系統。建立綁定之后，DOM將和數據保持同步，無須手動維護DOM。使代碼能夠更加簡潔易懂、提升效率。

數據綁定語法

1.文本插值

{{ }}Mustache標簽

<span>Hello　{{ name }}</span>

data:{    name: 'vue'}== > Hello vue

單次插值

首次賦值后再更改vm實例屬性值不會引起DOM的變化

<span v-once="name">{{ name }}</span>

2.HTML屬性

Mustache標簽{{ }}

<div v-bind:id="'id-'+id"></div>

簡寫：

<div :id="'id-'+id"></div>

3.綁定表達式

放在Mustache標簽內的文本內容。除了直接輸出屬性值之外，一段綁定表達式可以由一個簡單的JavaScript表達式和可選的一個或多個過濾器構成(不支持正則表達式，若需要復雜的轉換，則使用過濾器或者計算屬性來進行處理)。

{{ index + 1}}{{ index == 0 ? 'a' : 'b' }}{{name.split('').join('|') }}{{ var a = 1 }} //無效

4.過濾器

vue.js允許在表達式后添加可選的過濾器，以管道符"|"指示。

{{ name | uppercase }} // Vue.js將name的值傳入給uppercase這個內置的過濾器中(本質是一個函數)，返回字符串的大寫值。{{ name | filterA | filterB }}  //多個過濾器鏈式使用{{ name | filterA arg1 arg2 }} //傳入多個參數

此時，filterA將name的值做為第一個參數，arg1，arg2做為第二、第三個參數傳入過濾器函數中。

最終函數的返回值即為輸出結果。arg1，arg2可以使用表達式，也可以加上單引號，直接傳入字符串。

例如：

{{ name.split('') | limitBy 3 1 }} // ->u,e

過濾器limitBy可以接受兩個參數，第一個參數是設置顯示個數，第二個參數為可選，指從開始元素的數組下標。

vue.js內置的10個過濾器(Vue.js2.0中去除)

capitalize：字符串首字符轉化為大寫。
uppercase：字符串轉化為大寫。
lowercase：字符串轉化為小寫。
currency：參數為｛String｝[貨幣符號]，{Number}[小數位]，將數字轉化成貨幣符號，并且會自動添加數字分節號。

{{ amount | currency '￥' 2 }} //若amount值為1000，則輸出為￥1,000.00

pluralize：參數為{String}single,[double,triple],字符串復數化。

<p v-for="c in count">{{ c | pluralize 'item' }} {{ c | pliralize 'st' 'nd' 'rd' 'th' }} </p>

//輸出結果：1item 1st2items 2nd3items 3rd4items 4th