溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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.jb51.net 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已經去掉{{{}}防止閃爍方法 --> <span v-text="msg1"></span><!-- 文本的用v-text --> <span v-html="msg2"></span><!-- 轉義html標簽 --> </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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
