文本:数据绑定最基础的形式就是文本插值,使用一对双大括号
双大括号标签会被相应数据对象的msg属性的值替换,每当这个属性变化时它也会更新
HTML:
<span id="test01">Message:`msg`</span>
JS:
var vm = new Vue({ el:'#test01', data:{ msg:'数据绑定语法--文本插值' } });
{{变量名}}:表示绑定的变量,调用时需要用this.变量名
el:表示指令绑定的元素
vm:表示拥有该指令的上下文ViewModel
示例中的id也可以改为class,但是如果页面中含有多个相同的class的话,只对第一个有效
HTML:
<span class="test01">Message:`msg`</span>
JS:
var vm = new Vue({ el:'.test01', data:{ msg:'数据绑定语法--文本插值' } });
也可以只处理单次插值,今后的数据变化就不会再引起插值更新了,这句话怎么理解呢?看看下面的实例
HTML:
<div id="test02"> <input type="text" v-model="msg"> <p>{{* msg}}</p> </div>
JS:
var vm2 = new Vue({ el:'#test02', data:{ msg:'内容一起改变了吗?' } });
查看页面效果截图发现,随着输入框内容的改变(无论是添加内容还是删除原来的内容),p标签的内容都不会发生任何改变,也就是说数据变化并没有引起插值更新
双大括号将数据解析成纯文本,而三大括号将数据解析成真正的HTML字符串
HTML:
<span id="test03">双大括号解析成纯文本:`msg`</span><br> <span id="test04">三大括号解析成HTML字符串:{`msg`}</span>
JS:
var vm3 = new Vue({ el:'#test03', data:{ msg:'<a href="#">链接</a>' } }); var vm4 = new Vue({ el:'#test04', data:{ msg:'<a href="#">链接</a>' } });
双大括号标签也可以用在HTML特性内
HTML:
<div id="item-`id`"></div>
页面效果截图:
文本的取值除了可以是string类型以外,还可以是number,boolean,array,json, 我们可以看看下面的实例代码
<div id="box"> <p>`msg`</p> <p>`msg1`</p> <p>`msg2`</p> <p>`msg3`</p> <p>`arr`</p> <p>`json`</p> </div>
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'} } })
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。