簡單了解vue 插值表達式Mustache
更新時間：2020年07月22日 16:51:47 作者：字母哥博客
這篇文章主要介紹了vue 插值表達式Mustache的相關(guān)資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下
一、本節(jié)說明
用樣例詳細的說明插值表達式{{}}的使用，將模型數(shù)據(jù)插入到頁面當中。
插值表達式為什么叫Mustache(英文:八字須)呢？看看{{內(nèi)容}}的兩個大括號像不像八字胡子呢！
二、怎么做
<div id="app" 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/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è)為瀏覽器展示效果截圖，對比學習:
四、深入
由上面的例子可以看出：插值表達式支持與其他的文字聯(lián)合使用，也支持三目運算和算術(shù)運算，還可以使用javascript函數(shù)和自定義函數(shù)。
- lastName.split('rr').reverse().join(',')的作用是將lastName字符串‘Curry'用‘rr'分割為數(shù)組['Cu','y'],然后數(shù)組倒序，并用逗號為分隔符號合并(join)字符串數(shù)組。
- Vue對象中的methods代碼段是專門用于定義自定義函數(shù)的，我們自定義了函數(shù)customMethod，并在插值表達式中使用了它。事件監(jiān)聽的自定義函數(shù)，我們會在后面的章節(jié)詳細介紹。
以上就是簡單了解vue 插值表達式Mustache的詳細內(nèi)容，更多關(guān)于vue 插值表達式Mustache的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
最近寫vue的一個練手項目需要在里面實現(xiàn)一個輪播圖,想到去用第三方插件,百度了一輪,發(fā)現(xiàn)大部分都是swiper這個插件,這篇文章主要給大家介紹了關(guān)于vue2使用swiper4踩坑的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue中的proxy代理的用法(解決跨域問題)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
在使用npm命令時,如果直接從國外的倉庫下載依賴,下載速度很慢,甚至會下載不下來,我們可以更換npm的倉庫源,提高下載速度,這篇文章主要給大家介紹了關(guān)于vue中npm如何設(shè)置倉庫地址的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細介紹了Vue3+Ts如何實現(xiàn)緩存,用戶搜索詞本地排名,延遲消費或者消息隊列,用戶簽到和鎖,以及接口限流,還有全局ID等功能,需要的可以參考下2024-03-03
這篇文章主要介紹了從零開始搭建vue移動端項目到上線的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
vue項目中的支付功能實現(xiàn)(微信支付和支付寶支付)
本文主要介紹了vue項目中的支付功能實現(xiàn)(微信支付和支付寶支付)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了vue上傳文件formData上傳的解決全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue組件 $children,$refs，$parent的使用詳解
本篇文章主要介紹了vue組件 $children,$refs，$parent的使用詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Vue項目如何分環(huán)境打包,實現(xiàn)方法大概分為六步驟，需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue cli 3.0通用打包配置代碼,不分一二級目錄，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09