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 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
vue中各种通信传值方式总结
Feb 14 Javascript
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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
基于文本的搜索
2006/10/09 PHP
在PHP中执行系统外部命令
2006/10/09 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
在python中做正态性检验示例
2019/12/09 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
房产销售经理职责
2013/12/20 职场文书
小学毕业感言300字
2014/02/19 职场文书
岗位竞聘书范文
2014/03/31 职场文书
2014年外联部工作总结
2014/11/17 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
楚门的世界观后感
2015/06/03 职场文书
教师师德工作总结2015
2015/07/22 职场文书
大学生社会实践感想
2015/08/11 职场文书
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android