插值
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>