Vue指令之 v-cloak、v-text、v-html实例详解


Posted in Javascript onAugust 08, 2019

v-cloak

当用户频繁刷新页面或网速慢时,页面未完成 Vue.js 的加载时,导致 Vue 来不及渲染,这就会导致在浏览器中直接暴露插值(表达式),Vue由此也给出了解决方法。

在指定标签或整个父容器加入v-cloak指令,通过css选择器选中v-cloak,隐藏元素即可。

// html
<div v-cloak id="app">
 <span>{{ msg }}</span>
</div>
// css
[v-cloak]{
 display:"none";
}
// vue实例对象 => vm
var vm = new Vue({
 el:'#app',
 data:{
 msg:"hello world",
 }
})

Vue指令之 v-cloak、v-text、v-html实例详解

从图中可以看到,Vue在页面数据传递时,如果一开始插值表达式获取不到数据,那么包含“v-cloak”属性的节点就会执行“display:none”样式,导致页面什么也看不到,当插值表达式获取到数据之后,就会在节点中自动移除“v-cloak”属性,这时样式也就不起作用了,从而展示了正常的数据。

那么v-cloak指令渲染数据会不会影响到附近元素内容?

Vue指令之 v-cloak、v-text、v-html实例详解

可以看到,v-cloak指令不会覆盖元素内容。

v-text
v-text指令与v-cloak指令非常相似,v-text 指令不会暴露插值,但会覆盖附近元素内容。
// html
<div id="app">
 <span v-text="msg">这是一些文字</span>
</div>

// vue实例对象 => vm
var vm = new Vue({
 el:'#app',
 data:{
 msg:"hello world",
 }
})

Vue指令之 v-cloak、v-text、v-html实例详解

我在span标签中加入了 " 这是一些文字 " ,但是vue覆盖了元素内容,完成后并移除了v-text指令。

v-html

把字符串转义为html代码插入到文档,需要注意的是,v-html也会覆盖附近元素内容。

<div id="app">
 <p v-html="HTML"></p>
</div>
// vue实例对象 => vm
var vm = new Vue({
 el:'#app',
 data:{
 HTML:'<b>我是通过v-html指令插入</b>'
 }
})

Vue指令之 v-cloak、v-text、v-html实例详解

v-html指令为我们输出了真正的HTML代码,执行完并移除该指令在元素上的绑定。

总结

以上所述是小编给大家介绍的Vue指令之 v-cloak、v-text、v-html实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
javascript实现blob加密视频源地址的方法
Aug 08 #Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 #Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 #Javascript
js如何实现元素曝光上报
Aug 07 #Javascript
详解Element-UI中上传的文件前端处理
Aug 07 #Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 #Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 #Javascript
You might like
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
JS实现静止元素自动移动示例
2014/04/14 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
js动态引入的四种方法
2018/05/05 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
python 实现A*算法的示例代码
2018/08/13 Python
python3对接mysql数据库实例详解
2019/04/30 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
Python-split()函数实例用法讲解
2020/12/18 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
会计应届生的自荐信
2013/12/13 职场文书
食品安全检查制度
2014/02/03 职场文书
测量工程专业求职信
2014/02/24 职场文书
差生评语大全
2014/05/04 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
应届生求职自荐信
2014/07/04 职场文书
三孔导游词
2015/02/05 职场文书
演讲开场白和结束语
2015/05/29 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android