在线客服
扫描二维码
下载博学谷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开发还有优势吗?
互联网行业发展前景并且不明朗,整个互联网都正处在消费互联网向产业互联网过渡的阶段,由于行业壁垒很难打破,从而导致目前大数据等新型技术的落地应用存在一定的困难,但是行业中对高级java开发的需要还是很大的。
8523
2019-08-08 09:50:17
Java是什么?Java开发是什么意思?
Java是什么?Java开发是什么意思?Java是一种开发语言,核心特点跨平台、面向对象。对于开发者来讲Java基本等于Jdk。Java由四部分组成:Java编程语言,即语法;Java文件格式,即各种文件夹、文件的后缀。Java文件格式,即各种文件夹、文件的后缀;Java虚拟机(JVM),即处理*.class文件的解释器;Java应用程序接口(Java API)。
10174
2019-08-08 18:04:13
自学Java可以找到工作吗?要学到什么程度?
Java作为备受程序员喜爱的编程语言,在各行各业都被广泛使用,导致当下越来越来多的自学者想通过自己的努力,自学Java从而找到一份高薪可以改变自己职业前途的工作。那么自学Java可以找到工作吗?要学到什么程度?其实对大多数学习者来说,自学Java都不是一个最好的选择,一方面是因为Java语言自身学习的难度比较高,另一方面是自学效率低,对自学者能力要求高。
5176
2019-10-26 11:33:24
Java技术未来发展前景如何?
Java编程语言一直以来都是使用率最高的编程语言之一,由于Java具有安全性能高、可移植性、可拓展等特点,目前Java被国内外大型企业所推崇。对于Java技术未来发展前景,主要从从业者职业发展和发展领域、语言本身等几个方面来看。
4214
2019-11-19 18:25:05
Java是什么?有哪些特点?
Java是一门高级程序设计语言,从1995年被发布,到今天已经有25年的历史了。它的一大特点是跨平台,可运行于不同的操作系统,如Windows,Mac OS,以及多种UNIX版本的系统。根据Java的不同用途,可分为三个版本,分别是JavaSE、JavaEE以及JavaME。下面我们一起来深入了解一下Java这门编程语言。
4002
2020-08-07 14:53:47