1.JavaScript表达式
放在双大括号标签内的文本称为绑定表达式。在Vue.js中，一段绑定表达式由一个简单的JS表达式和可选的一个或多个过滤器构成
HTML：
|
1
2
3
|
<
span
id
=
"test01"
>数字加减：{{number+1}}</
span
><
br
>
<
span
id
=
"test02"
>三目运算：{{ok?'yes':'no'}}</
span
><
br
>
<
span
id
=
"test03"
>JS表达式：{{message.split('').reverse().join('')}}</
span
><
br
>
|
JS：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var
vm1=
new
Vue({
el:
'#test01'
,
data:{
number:3
}
});
var
vm2=
new
Vue({
el:
'#test02'
,
data:{
ok:
'yes'
}
});
var
vm3=
new
Vue({
el:
'#test03'
,
data:{
message:
'Roger'
}
});
|
2.过滤器
Vue.js允许在表达式后添加可选的“过滤器(Filter)”，以“管道符”指示。
这里我们将表达式message的值“管输（pipe）”到内置的capitalize过滤器，这个过滤器其实只是一个JS函数，返回大写话的值。 Vue.js提供了数个内置过滤器
HTML：
|
1
|
<
span
id
=
"test04"
>{{message|capitalize}}</
span
>
<!--capitalize:首字母大写-->
|
JS：
|
1
2
3
4
5
6
|
var
vm4=
new
Vue({
el:
'#test04'
,
data:{
message:
'hello'
}
});
|
页面效果截图：
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1859809
