vue插值表達(dá)式和v-text指令的區(qū)別
{{message}} 語(yǔ)法只能在標(biāo)簽內(nèi)容中使用
{{}}這種語(yǔ)法叫做插值表達(dá)式，在插值表達(dá)式中可以寫(xiě)任何合法的js表達(dá)式
1.使用插件表達(dá)式
使用插件表達(dá)式，存在內(nèi)容閃爍問(wèn)題，但是v-text沒(méi)有閃爍問(wèn)題
<div id="app">
<p>
{{message}}
</p>
<p v-text="message"></p>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"hello vue"
}
})
</script>
在上面這段代碼中，如果正常輸出的話結(jié)果是一致的。
但是如果網(wǎng)速比較慢的話，插件表達(dá)式則會(huì)先在頁(yè)面上輸出
{{message}}
隨后才會(huì)正常渲染頁(yè)面，這樣的效果對(duì)用戶體驗(yàn)是不夠好的。
2.在插件表達(dá)式中使用v-cloak解決閃爍問(wèn)題
<style>
[v-cloak]:{
display:none;
}
</style>
<div id="app">
<p v-cloak>
{{message}}
</p>
<p v-text="message"></p>
</div>
<script src="./js/vue.js"></script>
我們可以使用v-cloak屬性在運(yùn)行時(shí)讓其隱藏，但因?yàn)樵谶\(yùn)行結(jié)束時(shí)vue會(huì)自動(dòng)刪除v-cloak屬性
所以可以用這種方法來(lái)解決閃爍問(wèn)題
3.插件表達(dá)式
插件表達(dá)式只會(huì)插入內(nèi)容，不會(huì)覆蓋原本的內(nèi)容，而v-text會(huì)覆蓋掉原先的內(nèi)容
<div id="app">
<p>
----{{message}}----
</p>
// ----hello vue----
<p v-text="message">1234556</p>
// hello vue
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"hello vue"
}
})
</script>
到此這篇關(guān)于vue插值表達(dá)式和v-text指令的區(qū)別的文章就介紹到這了,更多相關(guān)vue插值表達(dá)式和v-text指令的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue基礎(chǔ)ESLint?Prettier配置教程詳解
這篇文章主要介紹了vue基礎(chǔ)ESLint?Prettier配置教程詳解，本文使用VsCode?+?Vue?+?ESLint?+?Prettier?實(shí)現(xiàn)代碼格式規(guī)范?+?保存自動(dòng)修復(fù)代碼js+vue2022-07-07
Vue上傳組件vue Simple Uploader的用法示例
本篇文章主要介紹了Vue上傳組件vue Simple Uploader的用法示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-08-08
vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法
今天小編就為大家分享一篇vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue如何實(shí)現(xiàn)簡(jiǎn)單的時(shí)間軸與時(shí)間進(jìn)度條
作為一個(gè)前端初學(xué)者,公司項(xiàng)目中前端需要一個(gè)進(jìn)度條,所以下面這篇文章主要給大家介紹了關(guān)于Vue如何實(shí)現(xiàn)簡(jiǎn)單的時(shí)間軸與時(shí)間進(jìn)度條的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue3+koa實(shí)現(xiàn)文件上傳功能的全過(guò)程記錄
開(kāi)發(fā)項(xiàng)目的時(shí)候,用到文件上傳的功能很常見(jiàn),包括單文件上傳和多文件上傳,下面這篇文章主要給大家介紹了關(guān)于vue3+koa實(shí)現(xiàn)文件上傳功能的相關(guān)資料,需要的朋友可以參考下2023-01-01
ElementUI組件Dialog彈窗再次打開(kāi)表單仍顯示上次數(shù)據(jù)的問(wèn)題
這篇文章主要介紹了ElementUI組件Dialog彈窗再次打開(kāi)表單仍顯示上次數(shù)據(jù)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue中created和mounted使用場(chǎng)景分析
vue.js中created方法是一個(gè)生命周期鉤子函數(shù)，一般可以在created函數(shù)中調(diào)用ajax獲取頁(yè)面初始化所需的數(shù)據(jù)，這篇文章主要介紹了Vue中created和mounted使用場(chǎng)景分析,需要的朋友可以參考下2023-05-05
vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能
這篇文章主要為大家詳細(xì)介紹了vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue使用swiper.js重疊輪播組建樣式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了axios在Vue項(xiàng)目中用來(lái)向后臺(tái)發(fā)送請(qǐng)求（調(diào)接口API），獲取響應(yīng)信息的方法,axios 是一個(gè)輕量的 HTTP客戶端，基于 XMLHttpRequest 服務(wù)來(lái)執(zhí)行 HTTP 請(qǐng)求，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07