簡(jiǎn)單了解vue 插值表達(dá)式Mustache
一、本節(jié)說(shuō)明
用樣例詳細(xì)的說(shuō)明插值表達(dá)式{{}}的使用,將模型數(shù)據(jù)插入到頁(yè)面當(dāng)中。插值表達(dá)式為什么叫Mustache(英文:八字須)呢?看看{{內(nèi)容}}的兩個(gè)大括號(hào)像不像八字胡子呢!
二、怎么做
<div style='background-color:aquamarine'> <!--mustache語(yǔ)法中,不僅僅可以直接寫(xiě)變量,也可以寫(xiě)簡(jiǎn)單的表達(dá)式--> <h2>{{firstName.length}}(使用‘.’獲取屬性)</h2> <h2>{{firstName + lastName}}(字符串拼接)</h2> <h2>{{firstName + ’ ’ + lastName}}(注意名字中間的的空格)</h2> <h2>{{firstName}} {{lastName}}(注意名字中間的空格)</h2> <h2>{{age * 2}}(簡(jiǎn)單的算術(shù)表達(dá)式)</h2> <h2>{{lastName == ’Curry’ ? ’真棒’ : ’還好’}}(三目運(yùn)算)</h2> <h2>{{lastName.split(’rr’).reverse().join(’,’)}}(使用javascript函數(shù))</h2> <h2>{{customMethod(lastName)}}(使用自定義的函數(shù))</h2> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.10/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è)為瀏覽器展示效果截圖,對(duì)比學(xué)習(xí):

四、深入
由上面的例子可以看出:插值表達(dá)式支持與其他的文字聯(lián)合使用,也支持三目運(yùn)算和算術(shù)運(yùn)算,還可以使用javascript函數(shù)和自定義函數(shù)。
lastName.split(’rr’).reverse().join(’,’)的作用是將lastName字符串‘Curry’用‘rr’分割為數(shù)組[’Cu’,’y’],然后數(shù)組倒序,并用逗號(hào)為分隔符號(hào)合并(join)字符串?dāng)?shù)組。 Vue對(duì)象中的methods代碼段是專門(mén)用于定義自定義函數(shù)的,我們自定義了函數(shù)customMethod,并在插值表達(dá)式中使用了它。事件監(jiān)聽(tīng)的自定義函數(shù),我們會(huì)在后面的章節(jié)詳細(xì)介紹。以上就是簡(jiǎn)單了解vue 插值表達(dá)式Mustache的詳細(xì)內(nèi)容,更多關(guān)于vue 插值表達(dá)式Mustache的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. 在IDEA中實(shí)現(xiàn)同時(shí)運(yùn)行2個(gè)相同的java程序2. Java如何基于反射機(jī)制獲取不同的類3. IntelliJ IDEA安裝插件的方法步驟4. Android table布局開(kāi)發(fā)實(shí)現(xiàn)簡(jiǎn)單計(jì)算器5. asp判斷某個(gè)文件是否存在的函數(shù)6. 理解PHP5中static和const關(guān)鍵字7. ASP.NET泛型三之使用協(xié)變和逆變實(shí)現(xiàn)類型轉(zhuǎn)換8. PHP安全-命令注入9. Python包資源下載路徑報(bào)404解決方案10. .NET Core Web APi類庫(kù)內(nèi)嵌運(yùn)行的方法

網(wǎng)公網(wǎng)安備