Vue.js學習筆記： 資料繫結文法---綁定運算式

標籤：vue.js 資料繫結 綁定運算式

1.JavaScript運算式

放在雙大括弧標籤內的文本稱為綁定運算式。在Vue.js中，一段綁定運算式由一個簡單的JS運算式和可選的一個或多個過濾器構成

HTML：

<span id="test01">數字加減：{{number+1}}</span><br><span id="test02">三目運算：{{ok?‘yes‘:‘no‘}}</span><br><span id="test03">JS運算式：{{message.split(‘‘).reverse().join(‘‘)}}</span><br>

JS：

var vm1=new Vue({    el:‘#test01‘,    data:{        number:3    }});var vm2=new Vue({    el:‘#test02‘,    data:{        ok:‘yes‘    }});var vm3=new Vue({    el:‘#test03‘,    data:{        message:‘Roger‘    }});

2.過濾器

Vue.js允許在運算式後添加可選的“過濾器(Filter)”，以“管道符”指示。

這裡我們將運算式message的值“管輸（pipe）”到內建的capitalize過濾器，這個過濾器其實只是一個JS函數，返回大寫話的值。 Vue.js提供了數個內建過濾器

HTML：

<span id="test04">{{message|capitalize}}</span> <!--capitalize:首字母大寫-->

JS：

var vm4=new Vue({    el:‘#test04‘,    data:{        message:‘hello‘    }});

頁面效果：

650) this.width=650;" src="http://s1.51cto.com/wyfs02/M00/88/80/wKiom1f57RaDyTr-AAFIetys5Kc452.png" title="QQ20161009150427.png" alt="wKiom1f57RaDyTr-AAFIetys5Kc452.png" />

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

Vue.js學習筆記： 資料繫結文法---綁定運算式