插值
1、文本插值
（1）雙向數據綁定
v-model="msg0101"，一旦v-model中的數值發生變化，所有用vue表達式{{msg0101}}的數據都會更新。
（2）單次插值
v-model="msg0102"，但是：如果我們僅僅需要顯示msg0102初始化的值，則用{{#msg0102}}取值，這樣，即便model中的數值發生變化，我們這里取出來的還是最原先的值。
（3）html文本的顯示與轉義
{{}}雙大括號默認顯示的是在data中定義的字符串，即便是html文本，也會原樣輸出。
例如，我們在data中定義了msgHtml：'<span style="color:red; ">helloworld</span>'，為了在頁面中也顯示的是html代碼，我們只需要正常取值就ok：{{msgHtml}}
但是，如果我們要將我們的字符串文本在頁面顯示為正常的文檔流，則用三大括號{{{msgHtml}}}輸出，頁面顯示的就是helloworld。span標簽已經顯示在文檔流中了
（4）html特性（雙大括號標簽也可以用在 HTML 特性 (Attributes) 內）
<ul> <li v-for="item in items"> <span id="item-{{item.itemId}}">當前元素ID：item-{{item.itemId}} 。index:{{$index}}; itemName:{{item.itemName}}; itemDesc:{{item.itemDesc}}</span> </li> </ul>
data:{
items: [{
itemId: "itemId01 ",
itemName: "itemName01 ",
itemDesc: "itemDesc01 "
}, {
itemId: "itemId02 ",
itemName: "itemName02 ",
itemDesc: "itemDesc02 "
}, {
itemId: "itemId03 ",
itemName: "itemName03 ",
itemDesc: "itemDesc03 "
}, ]
}
結果展示：
2、綁定表達式插值
在 Vue.js 中，一段綁定表達式由一個簡單的 JavaScript 表達式和可選的一個或多個過濾器構成。
（1）javascript表達式
二元表達式
在data中定義
data: {
number01: 10,
number02: "10",
}
{{number01+1}}渲染后：11（數值類型二元運算）
{{number02+1}}渲染后：101（數值類型與字符串類型相加，先將數值類型轉化為字符串，然后拼接字符串）
三元表達式
data中初始化四個數值
data: {
ok01: true,
ok02: false,
ok03: "hello ",
ok04: "",
}
div中的表達式判斷
<p>ok01 is true: {{ok01?"ok01":"cancel01"}}</p>
<p>ok02 is false: {{ok02?"ok02":"cancel02"}}</p>
<p>ok03 is "hello": {{ok03?"ok03":"cancel03"}}</p>
<p>ok04 is "": {{ok04?"ok04":"cancel04"}}</p>
注意：在三元表達式中{{isOk?"yes":"no"}}表達式相當於下面的條件判斷
if(isOk){
//如果isOk是string類型，isOk未定義或者isOk是空字符串，則執行return "no"，否則執行return "yes"。
//如果isOk是number類型，isOk未定義或者isOk的值為0，則執行return "no"，否則執行return "yes"。
return "yes";
}else{
return "no";
}
使用js函數
在data中初始化數據msg01
data: {
msg01: "this is message01"
}
在vue綁定的標簽中寫入
<p>this is message01在表達式中倒序: {{msg01.split("").reverse().join("")}}</p>
結果展示：
this is message01在表達式中倒序: 10egassem si siht
（2）過濾器
官方過濾器API：http://cn.vuejs.org/api/#過濾器
在data中定義數組fItems:
fItems: [{
name: "《精通Spring》",
price: "38.80"
}, {
name: "《精通Hibiernate》",
price: "28.80"
}, {
name: "《精通Jquery》",
price: "25.99"
}, {
name: "《精通Vue》",
price: "18.88"
}]
在vue綁定的標簽內引用過濾器（lowercase：將所有字母變為小寫，currency：指定貨幣符號）
<ul> <li v-for="item in fItems"> name: {{item.name|lowercase }}; price:{{item.price|currency "$"}} </li> </ul>
結果展示：
完整html代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title>數據綁定</title> </head> <body> <h2>插值</h2> <div id='dr01'> <h4>#文本</h4> <h5>雙向數據綁定</h5> <input v-model='msg0101' type='text' placeholder='雙向數據綁定' /> <p>{{msg0101}}</p> <h5>單次插值</h5> <input v-model='msg0102' type='text' placeholder='單次插值' /> <p>{{*msg0102}}</p> <hr /> <h4>#原始html文本：</h4> <p>雙大括號: {{msgHtml}}</p><span>msg是什么就輸出什么，不會轉義</span> <p>三大括號: {{{msgHtml}}}</p><span>msg會發生轉義"<"輸出"<"，"{{msgLt}}"輸出"<"</span> <hr /> <h4>#html特性（Mustache 標簽也可以用在 HTML 特性 (Attributes) 內：）</h4> <ul> <li v-for="item in items"> <span id="item-{{item.itemId}}">當前元素ID：item-{{item.itemId}} 。index:{{$index}}; itemName:{{item.itemName}}; itemDesc:{{item.itemDesc}}</span> </li> </ul> </div> <hr /> <div id="dr02"> <h4>#綁定表達式</h4> <div> <h5>JavaScript表達式</h5> <div> <p>10+1: {{number01+1}}</p> <p>"10"+1: {{number02+1}}</p> </div> <div> <p>ok01 is true: {{ok01?"ok01":"cancel01"}}</p> <p>ok02 is false: {{ok02?"ok02":"cancel02"}}</p> <p>ok03 is "hello": {{ok03?"ok03":"cancel03"}}</p> <p>ok04 is "": {{ok04?"ok04":"cancel04"}}</p> </div> <div> <p>this is message01在表達式中倒序: {{msg01.split("").reverse().join("")}}</p> </div> <!-- 在Vue實例的作用域內，每個綁定只能包含單個表達式，下面是錯誤示例，暫時注釋掉 --> <!--<div>--> <!-- 這是一個語句，不是一個表達式： --> <!--<span>{{var error01="this is error"}}</span>--> <!--</div>--> <!--<div>--> <!-- 流程控制也不可以，可改用三元表達式 --> <!--<span>{{if(error02){return message}}}</span>--> <!--</div>--> </div> <hr /> <h4>過濾器</h4> <div> <div> 示例01：{{{fMsg01}}} <p> message是表達式，capitalize是過濾器 </p> </div> <div> 示例02：{{{fMsg02}}} <p> 過濾器可以串聯 </p> </div> <div> 示例03：{{{fMsg02}}} <p> 過濾器可以接受參數，過濾器函數始終以表達式的值作為第一個參數。帶引號的參數視為字符串，而不帶引號的參數按表達式計算。這里，字符串 'arg1' 將傳給過濾器作為第二個參數，表達式 arg2 的值在計算出來之后作為第三個參數。 </p> </div> <div> <p>過濾器使用</p> <ul> <li v-for="item in fItems"> name: {{item.name|lowercase }}; price:{{item.price|currency "$"}} </li> </ul> </div> </div> </div> <script> var dr01 = new Vue({ el: '#dr01', data: { msg0101: 'this is msg0101', msg0102: 'this is msg0102', msgHtml: '<span style="color:red;">\'this is less: <\'</span>', msgLt: '<', items: [{ itemId: "itemId01", itemName: "itemName01", itemDesc: "itemDesc01" }, { itemId: "itemId02", itemName: "itemName02", itemDesc: "itemDesc02" }, { itemId: "itemId03", itemName: "itemName03", itemDesc: "itemDesc03" }, ] } }); var dr02 = new Vue({ el: "#dr02", data: { number01: 10, number02: "10", ok01: true, ok02: false, ok03: "hello", ok04: "", msg01: "this is message01", error01: "this is error01", error02: true, fMsg01: "{{ message | capitalize }}", fMsg02: "{{ message | filterA | filterB }}", fMsg02: "{{ message | filterA 'arg1' arg2 }}", fItems: [{ name: "《精通Spring》", price: "38.80" }, { name: "《精通Hibiernate》", price: "28.80" }, { name: "《精通Jquery》", price: "25.99" }, { name: "《精通Vue》", price: "18.88" }] }, }); </script> </body> </html>