您的当前位置：首页 vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

来源：吃客养生

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.gxlcms.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 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程序设计有所帮助。