vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
更新时间：2019年03月13日 09:09:40 作者：白杨-M
这篇文章主要介绍了vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法,结合实例形式分析了vue.js使用v-text和v-html、v-cloak防止花括号{{}}闪烁的解决方法,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
vue-router报错:uncaught error during route
这篇文章主要介绍了vue-router报错:uncaught error during route navigati问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
vue-quill-editor插入图片路径太长问题解决方法
这篇文章主要介绍了vue-quill-editor插入图片路径太长问题解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
Vue 3 使用moment设置显示时间格式的问题及解决方法
在Vue 3中,因为过滤器(filter)已经被废弃,取而代之的是全局方法(global method),本文给大家介绍Vue 3 使用moment设置显示时间格式的问题及解决方法,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了vue2从数据变化到视图变化之diff算法图文详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
今天小编就为大家分享一篇对Vue.js实现表格渲染的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue使用多级弹窗(Dialog)出现蒙版遮罩问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要为大家介绍了Vue 的router路由，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
Vue是用于构建用户界面的渐进式JavaScript框架。特色：构建用户界面—数据变成界面；渐进式—Vue可以自底向上逐层的应用。VUE有两种使用方式，一种实在html中直接使用vue做开发，一种是企业级的单页面应用。2023-02-02
这篇文章主要介绍了Vue2 轮播图slide组件实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
这篇文章主要给大家介绍了关于项目部署后前端vue代理失效问题的解决办法,文中通过图文以及代码示例将解决的办法介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-02-02
最新评论