Vue.js學習筆記： 資料綁定文法---綁定表達式

1.JavaScript表達式

放在雙大括号标簽内的文本稱為綁定表達式。在Vue.js中，一段綁定表達式由一個簡單的JS表達式和可選的一個或多個過濾器構成

HTML：

<code>&lt;</code><code>span</code> <code>id</code><code>=</code><code>"test01"</code><code>&gt;數字加減：{{number+1}}&lt;/</code><code>span</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code>

<code>&lt;</code><code>span</code> <code>id</code><code>=</code><code>"test02"</code><code>&gt;三目運算：{{ok?'yes':'no'}}&lt;/</code><code>span</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code>

<code>&lt;</code><code>span</code> <code>id</code><code>=</code><code>"test03"</code><code>&gt;JS表達式：{{message.split('').reverse().join('')}}&lt;/</code><code>span</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code>

JS：

<code>var</code> <code>vm1=</code><code>new</code> <code>Vue({</code>

<code>    </code><code>el:</code><code>'#test01'</code><code>,</code>

<code>    </code><code>data:{</code>

<code>        </code><code>number:3</code>

<code>    </code><code>}</code>

<code>});</code>

<code>var</code> <code>vm2=</code><code>new</code> <code>Vue({</code>

<code>    </code><code>el:</code><code>'#test02'</code><code>,</code>

<code>        </code><code>ok:</code><code>'yes'</code>

<code>var</code> <code>vm3=</code><code>new</code> <code>Vue({</code>

<code>    </code><code>el:</code><code>'#test03'</code><code>,</code>

<code>        </code><code>message:</code><code>'Roger'</code>

2.過濾器

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

這裡我們将表達式message的值“管輸（pipe）”到内置的capitalize過濾器，這個過濾器其實隻是一個JS函數，傳回大寫話的值。 Vue.js提供了數個内置過濾器

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

<code>var</code> <code>vm4=</code><code>new</code> <code>Vue({</code>

<code>    </code><code>el:</code><code>'#test04'</code><code>,</code>

<code>        </code><code>message:</code><code>'hello'</code>

頁面效果截圖：

<a href="http://s1.51cto.com/wyfs02/M00/88/80/wKiom1f57RaDyTr-AAFIetys5Kc452.png" target="_blank"></a>

本文轉自   frwupeng517   51CTO部落格，原文連結:http://blog.51cto.com/dapengtalk/1859809