Vue.js学习笔记： 插值
文本：数据绑定最基础的形式就是文本插值，使用一对双大括号
双大括号标签会被相应数据对象的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
以上是 Vue.js学习笔记： 插值 的全部内容，
来源链接：
utcz.com/z/376270.html
