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>www.dhdzp.com 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-router報(bào)錯(cuò):uncaught error during route
這篇文章主要介紹了vue-router報(bào)錯(cuò):uncaught error during route navigati問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue-quill-editor插入圖片路徑太長(zhǎng)問題解決方法
這篇文章主要介紹了vue-quill-editor插入圖片路徑太長(zhǎng)問題解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
Vue?3?使用moment設(shè)置顯示時(shí)間格式的問題及解決方法
在Vue?3中,因?yàn)檫^濾器(filter)已經(jīng)被廢棄,取而代之的是全局方法(global?method),本文給大家介紹Vue?3?使用moment設(shè)置顯示時(shí)間格式的問題及解決方法,感興趣的朋友一起看看吧
2023-12-12
vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解
這篇文章主要介紹了vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue.js實(shí)現(xiàn)表格渲染的方法
今天小編就為大家分享一篇對(duì)Vue.js實(shí)現(xiàn)表格渲染的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue使用多級(jí)彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決
這篇文章主要介紹了vue使用多級(jí)彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
詳解Vue router路由
這篇文章主要為大家介紹了Vue 的router路由，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
HTML頁(yè)面中使用Vue示例進(jìn)階（快速學(xué)會(huì)上手Vue）
Vue是用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。特色：構(gòu)建用戶界面—數(shù)據(jù)變成界面；漸進(jìn)式—Vue可以自底向上逐層的應(yīng)用。VUE有兩種使用方式，一種實(shí)在html中直接使用vue做開發(fā)，一種是企業(yè)級(jí)的單頁(yè)面應(yīng)用。
2023-02-02
Vue2 輪播圖slide組件實(shí)例代碼
這篇文章主要介紹了Vue2 輪播圖slide組件實(shí)例代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-05-05
項(xiàng)目部署后前端vue代理失效問題解決辦法
這篇文章主要給大家介紹了關(guān)于項(xiàng)目部署后前端vue代理失效問題的解決辦法,文中通過圖文以及代碼示例將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-02-02