本文共 1702 字，大约阅读时间需要 5 分钟。
文本：数据绑定最基础的形式就是文本插值，使用一对双大括号
双大括号标签会被相应数据对象的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' } } }) |
转载地址：http://ykgvl.baihongyu.com/