快捷導(dǎo)航

vue防止花括號(hào){{}}閃爍v-text和v-html、v-cloak用法示例

更新時(shí)間：2019年03月13日 09:09:40 作者：白楊-M

這篇文章主要介紹了vue防止花括號(hào){{}}閃爍v-text和v-html、v-cloak用法,結(jié)合實(shí)例形式分析了vue.js使用v-text和v-html、v-cloak防止花括號(hào){{}}閃爍的解決方法,需要的朋友可以參考下

本文實(shí)例講述了vue防止花括號(hào){{}}閃爍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>chabaoo.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>

測(cè)試運(yùn)行效果：

二、v-cloak

<style>
[v-cloak]{
  /*比較大的段落，防止閃爍，看到花括號(hào)*/
  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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Vue實(shí)現(xiàn)瀏覽器打印功能的代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)瀏覽器打印功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-04-04
VUE?組件的計(jì)算屬性詳解
這篇文章主要介紹了VUE組件的計(jì)算屬性詳解，使用計(jì)算機(jī)屬性還是methods取決于你是否需要緩存，當(dāng)遍歷大數(shù)組和做大量計(jì)算時(shí)，應(yīng)當(dāng)使用計(jì)算機(jī)屬性，除非你不希望得到緩存，下文來(lái)了解具體詳情
2022-06-06
五分鐘教你使用vue-cli3創(chuàng)建項(xiàng)目(新手入門)
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue + element 實(shí)現(xiàn)多選框組并保存已選id集合的示例代碼
這篇文章主要介紹了Vue + element 實(shí)現(xiàn)多選框組并保存已選id集合,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06
Vue使用正則校驗(yàn)文本框?yàn)檎麛?shù)
這篇文章主要介紹了Vue使用正則校驗(yàn)文本框?yàn)檎麛?shù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
如何通過(guò)Vue實(shí)現(xiàn)@人的功能
這篇文章主要介紹了如何通過(guò)vue實(shí)現(xiàn)微博中常見(jiàn)的@人的功能，同時(shí)增加鼠標(biāo)點(diǎn)擊事件和一些頁(yè)面小優(yōu)化。感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2021-12-12
解決vue 單文件組件中樣式加載問(wèn)題
這篇文章主要介紹了解決vue 單文件組件中樣式加載問(wèn)題,文章末尾給大家補(bǔ)充介紹了vue單文件組件中樣式的問(wèn)題，需要的朋友可以參考下
2019-04-04
詳解vuex數(shù)據(jù)傳輸?shù)膬煞N方式及this.$store undefined的解決辦法
這篇文章主要介紹了vuex數(shù)據(jù)傳輸?shù)膬煞N方式及 this.$store undefined的解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
vuex-persist 使用場(chǎng)景分析
Vuex-Persist 是一個(gè)用于在 Vuex 中實(shí)現(xiàn)持久化狀態(tài)的庫(kù),它可以用來(lái)解決應(yīng)用程序在刷新瀏覽器或關(guān)閉頁(yè)面后丟失 Vuex store 中狀態(tài)的問(wèn)題,本文給大家介紹vuex-persist 可以用來(lái)干什么,感興趣的朋友一起看看吧
2023-11-11