第七节:实战前必须掌握的10个指令(上)
最近发现更新得越快,后台的收到的催更消息就越多,这个号只有我一个人在写教程,写的速度难免跟不上大家阅读的速度,我尽量多抽时间来写教程,喂饱你们!
这一节我们来学习并掌握在实战用一定会用到的10个指令,没错,是一定会用到,通过这些指令,可以让我们很方便的完成某些操作。掌握了这几个指令,我们距离实战就又近了一步。
1. v-text 指令
v-text 指令用于更新标签包含的文本,它的作用跟双大括号的效果一样。我们看看它的用法:
<div id="app">
<p v-text="msg"></p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:'hello,vue'
}
});
</script>
我们给<p></p>标签加上了指令 v-text ,它的值就是我们data数据中的msg,就这么简单,最后我们来看看渲染结果:
(渲染成功)
有没有发现,它的作用跟{{ msg }}效果是一样的:
<p v-text="msg"></p> <!--效果相同--> <p>{{ msg }}</p>
2. v-html 指令
这个指令我们再上一节刚刚讲过,它帮助我们绑定一些包含html代码的数据在视图上,比如:“<b>hello,vue</b>”,这个字符串包含了<b>标签,要想<b>不被当作普通的字符串渲染出来,就得用 v-html 指令。
<div id="app"> <p v-html="msg"></p> </div> <script> let app = new Vue({ el:"#app", data:{ msg:'<b>hello,vue</b>' } }); </script>
还是上面的代码,我们把 v-text 指令换成 v-html 指令,msg的值变成了含有html代码的:“<b>hello vue</b>”,我们看看渲染效果:
(效果图)
就这样,<b>标签被成功解析并渲染出来,视图上的文本也有了加粗的效果,这就是v-html发挥了作用,bingo!
3. v-show 指令
v-show ,听这名字就可以猜测它跟元素的显示/隐藏 相关,没错,它就是用来控制元素的display css属性的。
v-show 指令的取值为true/false,分别对应着显示/隐藏。有比较才能看到效果,我们拿两个标签分别设置不同的值,看看解析渲染效果。
<div id="app"> <p v-show="show1">我是true</p> <p v-show="show2">我是false</p> </div> <script> let app = new Vue({ el:"#app", data:{ show1:true, show2:false } }); </script>
我们用了两个<p>标签,都加上了 v-show 指令,取值分别为true和fasle,直接看效果吧!
(效果图)
第一个p标签的v-show设置为true,元素正常显示;第二个p标签的v-show设置为false,元素解析成:
<p style="display: none">我是false</p>
所以它不会显示在视图上。这就是 v-show 指令的用法,简单明了。
4. v-if 指令
v-if 指令的取值也是为true或false,它控制元素是否需要被渲染出来,听起来有点抽象,不怕,同样,我们拿两个元素设置不用的值,对比一下看效果就知道了。
<div id="app"> <p v-if="if_1">我是true</p> <p v-if="if_2">我是true</p> </div> <script> let app = new Vue({ el:"#app", data:{ if_1:true, if_2:false } }); </script>
我们把 v-show 指令换成了 v-if ,同样是两个<p>标签,同样是不同的取值:true和false。我们看效果:
(效果图)
看到了吧,设置为true的<p>标签,成功渲染出来,而设置为false的<p>标签,直接被一行注释代替了,并没有被解析渲染出来。
也许你会问了, v-show 和 v-if 都能控制元素显示或者隐藏,这两个怎么区别使用呢?
记住一点:如果需要频繁切换显示/隐藏的,就用 v-show ;如果运行后不太可能切换显示/隐藏的,就用 v-if 。
5. v-else 指令
if和else在编程语言一般都是结对出现的,在vue里面也不例外。它没有对应的值,但是要求前一个兄弟节点必须要使用 v-if 指令,也对,没有if,哪来的else。
<div id="app"> <p v-if="if_1">我是if</p> <p v-else>我是else</p> </div> <script> let app = new Vue({ el:"#app", data:{ if_1:false } });</script>
我们使用两个<p>标签,第一个使用 v-if 指令,并取值为false,第二个使用 v-else 指令,啥也不说了,看效果最直观:
(效果图)
只有第二个<p>标签被渲染出来,第一个<p>标签由于 v-if 指令的值为false,直接被忽视了,不渲染。
同理,一旦第一个标签的 v-if 指令的值为true,被忽视的就是第二个<p>标签了。 v-if 和 v-else 只有一个会被渲染出来。
有兴趣的同学,可以继续去了解一下 v-else-if 指令,同样很简单。
本节小结
学完本节,你应该掌握了 v-text 、 v-html 、 v-show 、 v-if 、 v-else 这5个指令的用法,并能区别使用 v-if 和 v-show 这2个指令。
后面章节的实战的时候,这些都是会用到的指令,所以要先掌握好,下一章节,我们继续介绍剩下的5个十分重要指令。
扩展阅读
1.《ECMAScript 6 系列》原创教程
第七节:实战前必须掌握的10个指令(上)相关推荐
- 第八节:实战前必须掌握的10个指令(下)
上一节我们学了5个重要的指令: v-text . v-html . v-show . v-if . v-else 传送门:< 实战前必须掌握的10个指令(上) > 这一节,我们继续学习剩下 ...
- Vue.js实战之系统学习第七节
想看上一节的请点击: Vue.js实战之系统学习第六节 接下来我们要学习第七节了,时间过的好快. 组件详解 组件是Vue.js的核心功能,也是整个框架设计最精彩的地方,当然也是最难掌握的.本章节将带你 ...
- 第七节 可执行程序的装载——20135203齐岳
第七节 可执行程序的装载 By 20135203齐岳 本周的主要内容: 可执行程序是如何得到的以及可执行程序的目标文件格式 动态库 &动态链接库 系统调用sys_exec函数的执行过程 预处理 ...
- linux分区命名规则,《linux就该这么学》第七节课:文件的各种权限以及linux分区命名规则...
笔记 (借鉴请改动) 5.3:文件特殊权限 SUID 临时拥有文件所有者的权限(基本上只是执行权限) SGID 临时拥有文件所有组的权限,在目录中创建文件自动继承该目录的用户组. SBIT 粘滞 ...
- 第七节 GUI 图形用户界面
第七节 GUI 图形用户界面 1. Swing 概述 2. 顶级容器 2.1 JFrame容器 2.2 JDialog容器 3. 布局管理器 3.1 BorderLayout(边界布局管理器) 3.2 ...
- 第七节 服务器硬件及RAID配置
文章目录 第七节 RAID磁盘阵列和Linux详细配置软RAID 一.RAID磁盘阵列 1.1 RAID0概述 1.2 RAID1概述 1.3 RAID5概述 1.4 RAID6概述 1.5 RAID ...
- 第四章 第七节:神奇的参数
Python基础入门(全套保姆级教程) 第四章 第七节:神奇的参数 带有装饰器的函数的参数问题:*,** args,kwages, 了解详细情况看代码看结论. def guanjia(game):# ...
- 钢七连实战C1-P1:js-python 学习路线
C1-P1课程1,第1节课讲义要点 js-python学习路线和问题 一.学习资源:由基本功,成长为能做各种项目.解决各种问题的软件设计师.架构师. 高级JS--Vue框架 https://www.i ...
- Python编程基础:第七节 字符串切片String Slicing
第七节 字符串切片String Slicing 前言 实践 前言 我们有时候需要对一个字符串进行切片,取其一部分作为新的字符串进行处理.例如从姓名中分别提取姓和名,从网站域名中提取网站名称等等. 实践 ...
最新文章
- Matlab中plot函数全功能解析
- Crawler:基于urllib库获取cn-proxy代理的IP地址
- lpr命令linux下未找到,linux – LPR命令无法识别CUPS打印机
- 执行 redis-dump 报错:ERROR (Errno::ENOENT): No such file or directory - ps -o rss= -p xxxxx
- dockerfile 修改文件权限_网易技术实践|Docker文件系统实战
- (AirWatch 系列之一)企业移动计算的集大成者--Airwatch简介
- 大数据应用现状:从发现价值到创造价值
- 了解更多关于11gR2 diskmon
- 蓝桥杯省赛 2021 杨辉三角形 python
- 杨帅浙江大学计算机,诚邀校友见证杭州校友会注册成立(非活动帖)
- 基于C语言的JPEG编码代码详解
- 自玩树莓派记录-关于树莓派LCD3.5英寸屏幕使用及raspios(raspbian)-lite简单GUI服务搭建记录
- 图片怎样加贴纸?这些方法值得一试
- vue引入重写样式修改Element-UI表格背景色以及悬浮背景色,带操作的表格也可以修改呦~
- Mac conda 使用
- 基于JSP的“爱心宠物诊所”系统课程设计
- python读取文件r_python读入文件时加r的作用?
- Http请求:Google调用本地摄像头权限开启
- Project 1:文章抄袭自动检测分析项目
- 《厚黑学》| 研究厚黑学的好处
热门文章
- 在线教育用户增长闭环白皮书
- html怎么给没张图片添加单击事件,如何在Canvas上的图形/图像绑定事件监听的实现...
- 2019中国(黄石)工业互联网创新发展大会将于11月召开
- 作者:何波(1989-),男,就职于中国信息通信研究院互联网法律研究中心
- 作者:谢华美(1976-),男,中国人民银行征信中心数据部副总经理,主要研究方向为数据挖掘。...
- 作者:李晓明,男,北京大学教授、博士生导师。
- 【数字逻辑设计】Logisim构建多路选择器
- 【软件工程】计算资源
- 【数字逻辑设计】多级组合逻辑电路减少硬件
- eos 编译笔记(注意点)