12-----指令系统介绍
所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。
在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上。
OK,接下来我们一一介绍我们的指令系统的用法。
一、条件渲染
1、v-if
表示条件渲染
在vue中,我们使用v-if指令,将当前的dom元素设置
<p v-if = 'show'>显示</p>
注意:show变量,是数据属性中存储的值。要么真(true)要么假(false)。该属性值为true的时候,p标签显示,反之则不显示。
也可以添加一个v-else块。
<divv-if = 'show'>显示</div> <divv-else>隐藏</div>
另外我们发现,v-if将第一个div渲染,并没有将第二个div渲染。
另外还有v-else-if块,它是2.1.0新增的。
<div v-if="type === 'thunder'>打雷 </div> <div v-else-if="type === 'rain'>下雨 </div><div v-else>雷阵雨 </div>
2、v-show
另一个用于根据条件展示元素的选项是 v-show
指令。用法大致一样:
<p v-show='ok'>网站导航</p>
如果ok数据属性值为false。那么显示结果如下
不同的是带有 v-show
的元素始终会被渲染并保留在 DOM 中。v-show
只是简单地切换元素的 CSS 属性 display
注意:v-show不支持v-else块
3、v-if vs v-show
v-if
是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show
就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show
较好;如果在运行时条件很少改变,则使用 v-if
较好。
4、vi-if与v-for一起使用
v-for 指令,后面马上介绍到。
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
二、class与style绑定
v-bind
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性。所以我们可以用 v-bind
处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind
用于 class
和 style
时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
比如我们可以
绑定字符串
<span v-bind:title='time'>鼠标悬停几秒后当前时间</span>
data:{time: `页面加载于${new Date().toLocaleString()}`, }
当鼠标悬停在span标签几秒之后,会显示time的值。
绑定HTML Class
我们在js中常用操作dom的css样式属性的方法有很多,在vue中可以直接使用v-bind:class来给每个标签元素添加class。
对象语法
我们可以传给 v-bind:class
一个对象,以动态地切换 class:
... data:{isRed:true }
<div v-bind:class='{box1:isRed}'></div>
效果如下:
如果有按钮的话,我们可以通过点击按钮动态的切换class。此外,v-bind:class
指令也可以与普通的 class 属性共存
<div class='a' v-bind:class='{box1:isRed,box2:isGreen}'></div>
和如下data:
data:{isRed:true,isGreen:fasle }
效果如下:
有这么一个css样式:
.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 100px;height: 100px;background-color: green;}
那么我们在文档结构中可以加一个
<button v-on:click ='clickHandler'>切换</button>
使用v-on绑定js中所有的事件。这里我们是绑定了点击事件。(后面会介绍)
在实例化options参数中添加如下配置:
methods:{clickHandler(){this.isGreen = !this.isGreen;} }
数组语法
我们可以把一个数组传给v-bind:class,以应用一个 class 列表:
<div v-bind:class="[activeClass, errorClass]"></div>
data: {activeClass: 'active',errorClass: 'text-danger' }
渲染为:
<div class="active text-danger"></div>
如果你也想根据条件切换列表中的 class,可以用三元表达式:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
这样写将始终添加 errorClass
,但是只有在 isActive
是 true时才添加 activeClass
。
不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
三、事件处理
监听事件
可以用 v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
1 <div id='app'> 2 <button v-on:click = 'count+=1'>加{{count}}</button> 3 <p>点了{{count}}次</p> 4 </div>
var app = new Vue({el:'#app',data:{count:0 } })
结果为:当我点击的按钮的时候,下面p标签的数据也会发生变化,同时button的文字也会发生变化。
事件处理方法
然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on
指令中是不可行的。因此 v-on
还可以接收一个需要调用的方法名称。
1 <div id='app'> 2 <button v-on:click = 'countClick'>加{{count}}</button> 3 <p>点了{{count}}次</p> 4 </div>
var app = new Vue({el:'#app',data:{count:0 },methods:{countClick(){this.count+=1;}}})
为什么在HTML中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on
有几个好处:
扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
在这里多补充一点:v-bind可以简写为:、v-on: 可以简写@
列表渲染
一个数组列表的v-for
用v-for把一个数组对应为一组的元素。
我们用 v-for
指令根据一组数组的选项列表进行渲染。v-for
指令需要使用 item in items
形式的特殊语法,items
是源数据数组并且 item
是数组元素迭代的别名。
另外:v-for
还支持一个可选的第二个参数为当前项的索引。
一个对象的v-for
你也可以用 v-for
通过一个对象的属性来迭代。
转载于:https://www.cnblogs.com/edeny/p/9355897.html
12-----指令系统介绍相关推荐
- 8位12指令硬布线CPU设计
实验f4a 8位12指令硬布线CPU设计 模型机是计算机的缩细模型,通过它可以理解计算机整机的结构及功能,理解CPU.存储器.中断控制器.接口的结构及实现逻辑和各部件之间的接口关系.本次课程设计的主要 ...
- 我的世界基岩版json_我的世界基岩版1.12指令大全 中国版指令大全列表
今天风游为大家带来我的世界中国版指令大全,基岩版1.12命令大全.想知道我的世界中国版有哪些指令,基岩版1.12命令大全有什么功能的小伙伴就一起来看看吧! 在这之前风游先给大家提供一些常用的指令,避免 ...
- 我的世界服务器修改个人游戏模式吗,我的世界1period;12指令更改模式 | 手游网游页游攻略大全...
发布时间:2016-01-10 今天我们跟大家带来的是我的世界0.12.3指令代码大全,我的世界0.12.3在保留原有指令的基础上,加入了一些特别的指令,特殊指令目前还没有公开,之前的还可以用,需要的 ...
- ic 卡获取帐号apdu指令_非接触IC卡片APDU指令系统介绍..docx
CPU卡APDU指令介绍 APDU指令格式 根据7816-4规范,从终端发出的命令和卡片响应的信息必须遵从以下4种格式. 情形1: 命令 : CLA INS P1 P2 00 响应 : SW1 SW2 ...
- 埃斯顿三轴机器人编程_第九期直播课程:埃斯顿机器人指令系统介绍
时光飞逝,海渡学院APP直播课程埃斯顿机器人22天学习计划已过去两个月了,当然接下来的学习之旅还很长,免费学习,机会难得,还是希望大家能有所坚持,有所学,有所获,能通过这次课程的学习有所进步!埃斯顿机 ...
- S5PV210体系结构与接口02:ARM编程模型 汇编指令
目录 1. ARM的基本设定 1.1 ARM数据类型 1.1.1 基本数据类型 1.1.2 浮点数据类型 1.1.3 存储器大小端 1.2 支持的指令集 2. Cortex-A8编程模型 2.1 处理 ...
- Vue 基础之常用内置指令
Vue 基础之常用内置指令 描述 指令 内容渲染指令 {{}} 与 v-text 覆盖面积 v-text {{}} 闪现问题 {{}} v-text v-html 属性绑定指令 v-bind 简写 : ...
- 【实验报告】实验一 MIPS指令系统和MIPS体系结构
文章目录 实验一 MIPS指令系统和MIPS体系结构 实验目的 实验要求 实验内容 实验平台 实验步骤 拓展内容(选做) 实验结果 心得体会 参考资料 实验一 MIPS指令系统和MIPS体系结构 实验 ...
- Lammps命令与in文件
一.各类文件 1 in :程序写入 2 log :写入状态信息(if the switch is used?) 3 screen : 决定结果的是否进行屏幕输出 4 var name : 定义一个变 ...
- 嵌入式笔记:单片机篇
文章目录 硬件结构 硬件组成 AT89S51具有以下功能部件和特性 与AT89C51相比,AT89S51有更突出的优点 引脚功能 排列方式 分类 电源引脚:Vcc.Vss 时钟引脚:XTAL1.XTA ...
最新文章
- mysql dba系统学习(2)了解mysql的源码目录及源文件
- PowerDesigner将PDM导出生成WORD文档(转)
- 数据结构--单链表single linked list(无表头哨兵)重写
- php备份远程系统快照,ZFS snapshot高级篇之快照备份
- 三层交换机启用OSPF后,如何实现数据转发路径
- RedHat发布JBoss 7.2,完全支持Java EE 8规范
- Hive增加一列固定值
- 有一种尊重,叫迟三秒再关门
- CNNVD与CVE对齐
- python循环结构高一信息技术会考_高一信息技术会考样题及参考答案
- Inheritance: 'A' is an inaccessible base of 'B'
- Windows10怎么让某个软件禁止联网?设置软件禁止联网的方法
- 2022年详细诠释保税区一日游 一般贸易企业与加贸企业如何完成保税区一日游
- 图解PhotoView,从“百草园”到“三味书屋”!
- 王者荣耀英雄测试用例
- Hue无法访问HBase Thrift 1 server cannot be contacted: Could not connect to node01:9090
- 化合物相似性搜索_分子相似性的应用
- Vue watch 监听复杂对象变化,oldvalue 和 newValue 一致的解决办法。
- 【Nature. Mach. Intell. 】基于Transformer的多肽-HLA I类结合预测和疫苗的新生抗原序列设计...
- LVGL打印LOG日志
热门文章
- Git: 生成ssh公钥
- QTableView和QTableWidget翻页功能实现
- 美妙的模电2013/4/18
- .NET 开发环境中使用VSN版本控制
- 群体结构分析软件Structure使用步骤
- c# 操作文件_小练习(音乐播放器)
- windowsphone开发_[app开发定制公司]开发app需要什么技术呢?
- c盘python27文件夹可以删除嘛_电脑C盘那些文件夹可以删除
- linux手动注入网络数据_记一次手动SQL注入
- java 银联支付反馈,微信支付/支付宝支付/银联支付,对比加总结(Java服务端)