在线客服
扫描二维码
下载博学谷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感兴趣,零基础也可以学会,对于相应基础的要求并不高。相对而言有基础学习java更有优势,目前很多人是零转行或有一定基础进一步提升,有基础比较关心的现有的资源对想学java是否有利,或想学习java都要关注哪些知识点。
3576
2020-02-12 15:48:25
现在学Java编程开发好就业吗?
现在Java就业市场如何?如果从现在开始学习Java编程开发好就业吗?是不是真的如网上各种文章说的一样,Java开发工程师就业市场人才缺口非常大呢?其实在小编看来,现在的Java就业市场可以总结为两句话:就业机会多,但就业门槛正在不断提升!现在开始学习Java编程开发是否好就业,已经不仅仅是市场需求所决定的,更重要的是通过学习对知识的掌握的程度是否能够与企业招聘需求想匹配。
2706
2020-07-24 16:14:52
Redis数据库执行命令速度快的原因是什么?
Redis数据库执行命令速度快的原因是什么?作为服务端工程师工作中Redis用到的比较多。很多人知道Redis 快仅仅因为它是基于内存实现的,对于其它原因倒是模棱两可。
2376
2021-05-11 11:07:52
Java开发岗位需求量大吗?市场行情怎么样?
互联网大厂每一次的动作都会带来一股网络热浪,前不久的“反996”如此,最近腾讯推出员工退休待遇方案亦是如此。虽然退休离我们还很远,但是只要关乎福利就是我们关注的事情。
1970
2021-11-10 11:01:57
学习Java真的可以改变你的人生?
学习Java真的可以改变你的人生?在疫情期间远程办公的方式越来越流行,互联网的发展也越来越迅速,学习一门技术以备后患。或许学习Java真的可以改变你的工作和生活方式!
1422
2022-03-25 14:53:48