vue防止花括號{{}}閃爍v-text和v-html、v-cloak用法示例
更新時間：2019年03月13日 09:09:40 作者：白楊-M
這篇文章主要介紹了vue防止花括號{{}}閃爍v-text和v-html、v-cloak用法,結(jié)合實例形式分析了vue.js使用v-text和v-html、v-cloak防止花括號{{}}閃爍的解決方法,需要的朋友可以參考下
本文實例講述了vue防止花括號{{}}閃爍v-text和v-html、v-cloak用法。分享給大家供大家參考，具體如下：
一、v-text和v-html
<span>{{msg}}</span> --> v-text
{{{msg}}} --> v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dbjr.com.cn v-text和v-html</title>
<style>
</style>
<script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js" async></script>
</head>
<body>
<div id="box">
<span>{{{msg2}}}</span><!-- vue2.0已經(jīng)去掉{{{}}防止閃爍方法 -->
<span v-text="msg1"></span><!-- 文本的用v-text -->
<span v-html="msg2"></span><!-- 轉(zhuǎn)義html標(biāo)簽 -->
</div>
<script>
new Vue({
el:'#box',
data:{
msg1:'welcome text',
msg2:'<strong>welcome html</strong>'
}
});
</script>
</body>
</html>
測試運行效果：
二、v-cloak
<style>
[v-cloak]{
/*比較大的段落，防止閃爍，看到花括號*/
display: none;
}
</style>
<div class="reply" v-for="item in msgData" v-cloak>
<p class="replyContent">{{item.content}}</p>
<p class="operation">
<span class="replyTime">{{item.time|date}}</span>
<span class="handle">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="top">{{item.acc}}</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="down_icon">{{item.ref}}</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="cut">刪除</a>
</span>
</p>
</div>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了vue實現(xiàn)直播間點贊飄心效果的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了Vue實現(xiàn)瀏覽器打印功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了VUE組件的計算屬性詳解，使用計算機屬性還是methods取決于你是否需要緩存，當(dāng)遍歷大數(shù)組和做大量計算時，應(yīng)當(dāng)使用計算機屬性，除非你不希望得到緩存，下文來了解具體詳情2022-06-06
五分鐘教你使用vue-cli3創(chuàng)建項目(新手入門)
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項目，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue + element 實現(xiàn)多選框組并保存已選id集合的示例代碼
這篇文章主要介紹了Vue + element 實現(xiàn)多選框組并保存已選id集合,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了Vue使用正則校驗文本框為正整數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了如何通過vue實現(xiàn)微博中常見的@人的功能，同時增加鼠標(biāo)點擊事件和一些頁面小優(yōu)化。感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2021-12-12
這篇文章主要介紹了解決vue 單文件組件中樣式加載問題,文章末尾給大家補充介紹了vue單文件組件中樣式的問題，需要的朋友可以參考下2019-04-04
詳解vuex數(shù)據(jù)傳輸?shù)膬煞N方式及this.$store undefined的解決辦法
這篇文章主要介紹了vuex數(shù)據(jù)傳輸?shù)膬煞N方式 及 this.$store undefined的解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vuex-Persist 是一個用于在 Vuex 中實現(xiàn)持久化狀態(tài)的庫,它可以用來解決應(yīng)用程序在刷新瀏覽器或關(guān)閉頁面后丟失 Vuex store 中狀態(tài)的問題,本文給大家介紹vuex-persist 可以用來干什么,感興趣的朋友一起看看吧2023-11-11