本文實例講述了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>m.survivalescaperooms.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>測試運行效果：
二、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.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
新聞熱點
疑難解答
