文本：数据绑定最基础的形式就是文本插值，使用一对双大括号
双大括号标签会被相应数据对象的msg属性的值替换，每当这个属性变化时它也会更新
HTML：
|
1
|
<
span
id
=
"test01"
>Message:`msg`</
span
>
|
JS：
|
1
2
3
4
5
6
|
var
vm =
new
Vue({
el:
'#test01'
,
data:{
msg:
'数据绑定语法--文本插值'
}
});
|
{{变量名}}：表示绑定的变量，调用时需要用this.变量名
el:表示指令绑定的元素
vm:表示拥有该指令的上下文ViewModel
示例中的id也可以改为class，但是如果页面中含有多个相同的class的话，只对第一个有效
HTML:
|
1
|
<
span
class
=
"test01"
>Message:`msg`</
span
>
|
JS:
|
1
2
3
4
5
6
|
var
vm =
new
Vue({
el:
'.test01'
,
data:{
msg:
'数据绑定语法--文本插值'
}
});
|
也可以只处理单次插值，今后的数据变化就不会再引起插值更新了，这句话怎么理解呢？看看下面的实例
HTML：
|
1
2
3
4
|
<
div
id
=
"test02"
>
<
input
type
=
"text"
v-model
=
"msg"
>
<
p
>{{* msg}}</
p
>
</
div
>
|
JS：
|
1
2
3
4
5
6
|
var
vm2 =
new
Vue({
el:
'#test02'
,
data:{
msg:
'内容一起改变了吗？'
}
});
|
查看页面效果截图发现，随着输入框内容的改变（无论是添加内容还是删除原来的内容），p标签的内容都不会发生任何改变，也就是说数据变化并没有引起插值更新
双大括号将数据解析成纯文本，而三大括号将数据解析成真正的HTML字符串
HTML：
|
1
2
|
<
span
id
=
"test03"
>双大括号解析成纯文本:`msg`</
span
><
br
>
<
span
id
=
"test04"
>三大括号解析成HTML字符串：{`msg`}</
span
>
|
JS：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var
vm3 =
new
Vue({
el:
'#test03'
,
data:{
msg:
'<a href="#">链接</a>'
}
});
var
vm4 =
new
Vue({
el:
'#test04'
,
data:{
msg:
'<a href="#">链接</a>'
}
});
|
双大括号标签也可以用在HTML特性内
HTML：
|
1
|
<
div
id
=
"item-`id`"
></
div
>
|
页面效果截图：
文本的取值除了可以是string类型以外，还可以是number，boolean，array，json, 我们可以看看下面的实例代码
|
1
2
3
4
5
6
7
8
|
<
div
id
=
"box"
>
<
p
>`msg`</
p
>
<
p
>`msg1`</
p
>
<
p
>`msg2`</
p
>
<
p
>`msg3`</
p
>
<
p
>`arr`</
p
>
<
p
>`json`</
p
>
</
div
>
|
|
1
2
3
4
5
6
7
8
9
10
11
|
new
Vue({
el:
'#box'
,
data:{
msg:
'Hello World!'
,
msg1:2016,
msg2:
true
,
msg3:
false
,
arr:[
'nokia'
,
'samsung'
,
'apple'
,
'huawei'
,
'htc'
],
json:{a:
'apple'
, b:
'banana'
, c:
'cherry'
, d:
'durian'
}
}
})
|
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1859800
