待到芦花摇曳时，再倚西窗闻雁鸣，日落西山江上行，思缱绻，清月冷，风也寄情。光影斑驳，时光掠过，心于光阴的门楣，寂静欢喜。一纸素文，一缕清风，写意了心中的世界，终有一人的身影站立在风中于梦中，风去，影渐消。水潺潺，风声声，心低喃细语。 "
本文实例讲述了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.haodaima.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已经去掉{{{}}防止闪烁方法 -->
<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 rel="nofollow noopener noreferrer" href="javascript：;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="top">{{item.acc}}</a>
<a rel="nofollow noopener noreferrer" href="javascript：;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="down_icon">{{item.ref}}</a>
<a rel="nofollow noopener noreferrer" href="javascript：;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="cut">删除</a>
</span>
</p>
</div>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.haodaima.com/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
本文vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例到此结束。一个人最大的破产是绝望，最大的资产是期望。小编再次感谢大家对我们的支持！
