Vue.js學習筆記： 資料繫結文法---插值

標籤：vue.js 資料繫結 插值

文本：資料繫結最基礎的形式就是文本插值，使用一對雙大括弧

雙大括弧標籤會被相應資料對象的msg屬性的值替換，每當這個屬性變化時它也會更新

HTML：

<span id="test01">Message:{{msg}}</span>

JS：

var vm = new Vue({    el:‘#test01‘,    data:{        msg:‘資料繫結文法--文本插值‘    }});

也可以只處理單次插值，今後的資料變化就不會再引起插值更新了

HTML：

<span id="test02">This will never change:{{* msg}}</span>

JS：

var vm2 = new Vue({    el:‘#test02‘,    data:{        msg:‘看看有沒有大括弧標籤？‘    }});

雙大括弧將資料解析成純文字，而三大括弧將資料解析成真正的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>

頁面效果：

650) this.width=650;" src="http://s2.51cto.com/wyfs02/M02/88/7C/wKioL1f56XPSu66kAAEKVw7Bb2w303.png" title="QQ20161009145318.png" alt="wKioL1f56XPSu66kAAEKVw7Bb2w303.png" />

本文出自 “dapengtalk” 部落格，請務必保留此出處http://dapengtalk.blog.51cto.com/11549574/1859800

Vue.js學習筆記： 資料繫結文法---插值