Vue学习之路第三篇:插值表达式和v-text的区别
上一篇说到插值表达式有一个问题:
页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据。
对于这个问题Vue给予了解决办法,看具体事例。
<div id="app"><p v-cloak> {{ msg }} </p> </div>
节点中我们定义了 Vue 的内置属性 “v-cloak”
<style type="text/css">[v-cloak]{display:none;}</style>
这里我们定义了样式:包含属性“v-cloak”的节点默认隐藏
<script type="text/javascript">var vm = new Vue({el : "#app",data : {msg : "Hello Vue"}});</script>
创建Vue对象,并与id为“app”的节点绑定。
这时如果再在页面访问发现:如果页面加载很慢的时候,不会再出现“{{ msg }}”信息,直接是一片空白,当Vue数据传递完成时,会正确显示数据。
从上面运行截图可以分析出:
Vue在页面数据传递时,如果一开始插值表达式获取不到数据,那么包含“v-cloak”属性的节点就会执行“display:none”样式,导致页面什么也看不到,当插值表达式获取到数据之后,就会在节点中自动移除“v-cloak”属性,这时样式也就不起作用了,展示了正常的数据。这时有的看官就会抱怨尤雨溪大神了,整这么多事干嘛?能一下都解决了吗?
接下来,我们来学习另一个指令:v-text
<div id="app"><p v-cloak> {{ msg }} </p><p v-text="msg"></p></div>
执行代码
结果完全一样,页面元素也一样。但是这时候你把网速调的很慢会发现,“v-text”这个属性在页面数据加载没完成的时候不会出现“{{ msg }}”的现象。这时候有的看官又会提出质疑,有这个了为什么还要用插值表达式?
且往下看,上代码:
<div id="app"><p v-cloak> 这是从Vue对象里获取的数据:{{ msg }} </p><p v-text="msg">这是从Vue对象里获取的数据:</p></div>
运行结果:
结论:插值表达式可以把Vue传递过来的数据和前台用户自己定义的数据结合在一起,但是v-text只能显示Vue对象传递过来的数据,会替换掉节点里已有的内容。
总结:
1、如果要同时展示用户前台数据,那么就需要用插值表达式,但是不要忘记和“v-cloak”属性一起使用哦。
2、如果只是单独展示Vue对象里的数据,建议使用“v-text”指令。
弄清原理,根据需求,使用对应的解决方法,我想这是学习最高效的途径!
每天进步一点点!
转载于:https://www.cnblogs.com/shibin90/p/10312969.html
Vue学习之路第三篇:插值表达式和v-text的区别相关推荐
- Vue学习之路(基础篇)
Vue学习之路(基础篇)
- Vue学习之路第八篇:事件修饰符
学习准备: ①.顾名思义,"事件修饰符"那么肯定是用来修饰事件,既然和事件有关系,那么肯定和"v-on"指令(也可简写为:@)有关系了. ②.事件修饰符有以下几 ...
- alin的学习之路(数据库篇:三)(多表查询,子查询,集合运算,数据处理)
alin的学习之路(数据库篇:三)(多表查询,子查询,集合运算,数据处理) 1. 多表查询 1.1 笛卡儿积 笛卡尔积就是两个集合的乘积计算 . 如果多个表进行联合查询, 得到结果是一个笛卡尔积, 举 ...
- 前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由 二.动态路由+路由嵌套+404页面 三. 编程式导航 四.命名路由 五.命名视图 六.重定向和起别名 1.重定向 2.起别名 ...
- 学计算机之路写一篇作文,我的学习之路作文(2篇)
我的学习之路作文(2篇) 在我们平凡的日常里,大家对作文都再熟悉不过了吧,作文根据写作时限的不同可以分为限时作文和非限时作文.那要怎么写好作文呢?以下是小编整理的我的学习之路作文,仅供参考,欢迎大家阅 ...
- alin的学习之路(数据库篇:二)(select查询,where条件查询,order by排序,单行函数,多行函数,group by分组)
alin的学习之路(数据库篇:二)(select查询,where条件查询,order by排序,单行函数,多行函数,group by分组) 1. SQL语句 1.1 sql语言类型 sql是一门独立的 ...
- 个人开发经历--我的java学习之路(学校篇)
个人开发经历--我的java学习之路(学校篇) 个人介绍: 姓名: 不在这里说明 联系信息: 个人历程 jdbc阶段 sql生成器 一代代码生成器 servlet阶段 servlet项目中,sql生成 ...
- alin的学习之路(数据库篇:五)(MySQL的相关语句及API的C语言实现)
alin的学习之路(数据库篇:五)(MySQL的相关语句及API的C语言实现) 1. MySQL概述与登陆MySQL mysql 与 oracle 的区别 oracle 是一个数据库实例下有多个用户, ...
- 前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言 先安装node.js环境 ...
- Python3学习笔记之-学习基础(第三篇)
Python3学习笔记之-学习基础(第三篇) 文章目录 目录 Python3学习笔记之-学习基础(第三篇) 文章目录 一.循环 1.for循环 2.while循环 3.break,continue 二 ...
最新文章
- 使用结构体stuinf输入输出一个学生的信息
- 通过ajax调用WebService服务
- haproxy1.8安装配置
- python回归模型 变量筛选_如何进行高维变量筛选和特征选择(一)?Lasso回归
- 如何在endnote列表中显示research note
- iview table 自定义列_案例 | iview中Table:拖拽适配列、自定义固定列、合并行
- SAP License:移动类型541(委外业务)不产生会计凭证的原因
- 17秋 SDN课程 第一次作业
- 后台填充_单元格噩梦终于有救?500多行隔行填充,我就两步!
- 计算机主板提示ahci,映泰主板设置硬盘模式AHCI或IDE的教程
- 缓存数据一致性-解决方案
- 机器人系统设计及控制技术附加学习资料
- 浅谈什么是大数据?大数据可以做什么?
- win10防火墙不能自动启动
- 纯字母域名批量注册的详细步骤
- html5 css图片倒影,CSS3----图片倒影效果
- 中职中职计算机英语试题,中职英语试卷及参考答案
- matlab实验学习心得,matlab实验心得体会-学习matlab的心得体会
- python对txt文本文件边读边写,同时读取和写入的方式修改文件
- 国防军工企业信息化与信息安全概要
热门文章
- Xcode和macOS对应关系查询网址
- error LNK2019: 无法解析的外部符号 ,该符号在函数 中被引用
- 手机应用的照相录像功能,为什么转到后台就不能工作了?
- 1971年中国的预警机就上天了
- Linux下查看NVIDIA的GPU使用情况
- UBUNTU安装后的root/su密码问题
- UBUNTU配置samba
- 完全二叉树的节点数量
- linux 系统启动级别,LINUX系统启动级别介绍与解释
- linux c多线程进度条,Ubuntu 13.04,g++4.7,Pthread实现多线程模拟实现下载进度条