在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
Vue常见指令有哪些?一般来讲有v-model、v-on、v-for、v-if等等。下面我们一起来看看指令的定义、插值表达式以及各种Vue常见指令的例子~
1、指令的定义
在我们逐一学习Vue常见指令之前,我们首先要明白,什么是指令?简单概括起来,指令是带有v-前缀的特殊属性。例如v-model,代表双向绑定。
2、插值表达式
(1)花括号
格式是:{{表达式}}
该表达式支持JS语法,可以调用js内置函数(必须有返回值);表达式必须有返回结果。例如 1 + 1,没有结果的表达式不允许使用,如:var a = 1 + 1。可以直接获取Vue实例中定义的数据或函数。
例子:
(2)插值闪烁
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时,页面会显示出原始的{{}} ,加载完毕后才显示正确数据,称为插值闪烁。
(3)v-text和v-html
使用v-text和v-html指令来替代{{}}。v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出。v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染。改造原页面内容为:
效果:
并且不会出现插值闪烁,当没有数据时,会显示空白。
3、Vue常见指令
(1)v-model
v-model是双向绑定,视图(View)和模型(Model)之间会互相影响。既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型。目前v-model的可使用元素有:input、select、Textarea、checkbox、radio、components。基本上除了最后一项,其它都是表单的输入项。
示例:
多个checkbox 对应一个model时,model的类型是一个数组,单个checkbox值是boolean类型;radio对应的值是input的value值;input 和textarea 默认对应的model是字符串;select 单选对应字符串,多选对应也是数组。
(2)v-on
v-on指令用于给页面元素绑定事件。语法是:v-on:事件名="js片段或函数名"。简写语法:@事件名="js片段或函数名"。例如 v-on:click='add' 可以简写为@click='add'
示例:
(3)v-for
遍历数据渲染页面是非常常用的需求,Vue中通过v-for指令来实现。语法:v- for="item in items"。items:要遍历的数组,需要在vue的data中定义好;item:循环变量。在遍历的过程中,如果需要知道数组角标,可以指定第二个参数。语法是:v-for="(item,1 index) in items"。v-for除了可以迭代数组,也可以迭代对象。语法基本类似:
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
(4)v-if
-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。语法:v-if="布尔表达式"。示例:
以上就是Vue常见指令的介绍,大家如果想深入学习Vue的更多内容,欢迎上博学谷进行在线视频课程的免费学习~
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
没有基础可以转行学Java web吗?
没有基础可以转行学Java web吗?这个问题很多想入行的同学都会提问!相对于原本大学教育学习过Javaweb知识的同学,转行的同学会有一定劣势,但是这就意味着这部分同学不可以转行吗?答案必然是否定的。下面博学谷老师就为大家分享一下没有基础的情况下如何学习Java web!
8796
2019-08-07 18:11:08
现在学Java有前途吗?Java岗位饱和了吗?
学Java前途是有的,Java流行的网络编程语言之一,比较不错的语言,java语言在当今信息化社会中发挥着重要的作用。学历是门槛,初中高中学历建议先提升学历。Java行业的竞争激烈,应用领域和发展前景广泛。现在学Java还不晚,要知道Java有一定的门槛,技术更新的比较快,需要选择与企业需求匹配的Java课程内容。
4278
2020-10-21 17:12:56
Java常用设计模式及应用场景介绍
Java常用设计模式有哪些?设计模式是设计代码结构,方便开发或后期调整,学习Java必须要掌握一些常用设计模式,如单例模式、模板方法、工厂模式、建造者模式、适配器模式等。主要培养常用设计模式和代码抽取优化能力,可能涉及6大设计原则及23种设计模式。
5617
2021-04-12 16:02:05
Java开发中的I/O模型原理解析
Java开发中的I/O模型原理解析,I/O是 input/output的缩写即输入输出端口。每个设备都会有一个专用的I/O地址用来处理自己的输入输出信息。常见的五种IO模型分别是:阻塞IO、非阻塞IO、多路复用IO、信号驱动IO以及异步IO。
3810
2021-05-13 09:59:24
MySQL数据库as和distinct关键字怎么用?代码怎么写?
MySQL数据库as和distinct关键字怎么用?代码怎么写?使用SQL语句显示结果时,在屏幕显示的字段名不具备良好的可读性,我们可以使用 as 给字段起一个别名。在很多重复数据想要对其中重复数据行进行去重操作可以使用 distinct。
3460
2022-01-12 16:13:57