一、本節(jié)說明

用樣例詳細的說明插值表達式{{}}的使用，將模型數(shù)據(jù)插入到頁面當(dāng)中。插值表達式為什么叫Mustache(英文:八字須)呢？看看{{內(nèi)容}}的兩個大括號像不像八字胡子呢！

二、怎么做

<div style='background-color:aquamarine'> <!--mustache語法中,不僅僅可以直接寫變量,也可以寫簡單的表達式--> <h2>{{firstName.length}}（使用‘.’獲取屬性）</h2> <h2>{{firstName + lastName}}（字符串拼接）</h2> <h2>{{firstName + ’ ’ + lastName}}（注意名字中間的的空格）</h2> <h2>{{firstName}} {{lastName}}（注意名字中間的空格）</h2> <h2>{{age * 2}}（簡單的算術(shù)表達式）</h2> <h2>{{lastName == ’Curry’ ? ’真棒’ : ’還好’}}（三目運算）</h2> <h2>{{lastName.split(’rr’).reverse().join(’,’)}}（使用javascript函數(shù)）</h2> <h2>{{customMethod(lastName)}}(使用自定義的函數(shù))</h2> </div> <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script> <script> const app = new Vue({ el: ’#app’, data: { firstName: ’Stephen’, lastName: ’Curry’, age: 13 }, methods:{ customMethod(str){ return str.split(’rr’).reverse().join(’,’) } } }) </script>

三、效果

下圖左側(cè)為代碼，右側(cè)為瀏覽器展示效果截圖，對比學(xué)習(xí):

四、深入

由上面的例子可以看出：插值表達式支持與其他的文字聯(lián)合使用，也支持三目運算和算術(shù)運算，還可以使用javascript函數(shù)和自定義函數(shù)。

lastName.split(’rr’).reverse().join(’,’)的作用是將lastName字符串‘Curry’用‘rr’分割為數(shù)組[’Cu’,’y’],然后數(shù)組倒序，并用逗號為分隔符號合并(join)字符串?dāng)?shù)組。 Vue對象中的methods代碼段是專門用于定義自定義函數(shù)的，我們自定義了函數(shù)customMethod，并在插值表達式中使用了它。事件監(jiān)聽的自定義函數(shù)，我們會在后面的章節(jié)詳細介紹。

以上就是簡單了解vue 插值表達式Mustache的詳細內(nèi)容，更多關(guān)于vue 插值表達式Mustache的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！