溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了vue插值表達式Mustache的使用方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
一、本節說明
用樣例詳細的說明插值表達式{{}}的使用，將模型數據插入到頁面當中。
插值表達式為什么叫Mustache(英文:八字須)呢？看看{{內容}}的兩個大括號像不像八字胡子呢！
二、怎么做
<div id="app" >
<!--mustache語法中,不僅僅可以直接寫變量,也可以寫簡單的表達式-->
<h3>{{firstName.length}}（使用‘.'獲取屬性）</h3>
<h3>{{firstName + lastName}}（字符串拼接）</h3>
<h3>{{firstName + ' ' + lastName}}（注意名字中間的的空格）</h3>
<h3>{{firstName}} {{lastName}}（注意名字中間的空格）</h3>
<h3>{{age * 2}}（簡單的算術表達式）</h3>
<h3>{{lastName == 'Curry' ? '真棒' : '還好'}}（三目運算）</h3>
<h3>{{lastName.split('rr').reverse().join(',')}}（使用javascript函數）</h3>
<h3>{{customMethod(lastName)}}(使用自定義的函數)</h3>
</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>三、效果
下圖左側為代碼，右側為瀏覽器展示效果截圖，對比學習:
四、深入
由上面的例子可以看出：插值表達式支持與其他的文字聯合使用，也支持三目運算和算術運算，還可以使用javascript函數和自定義函數。
看完上述內容，是不是對vue插值表達式Mustache的使用方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
