首页 > 其他 > 详细

Vue的学习-1.关于指令,修饰符

时间:2020-10-30 22:34:54      阅读:34      评论:0      收藏:0      [点我收藏+]

一,Vue中指令的使用
v-text: 解决闪烁问题,只能解析内容,不能解析标签

v-html: 解析标签以及内容

v-if: 显示元素,如果为false则直接移除元素

v-show: 显示元素,如果为false则使用属性display:none 来设置 使用场景:频繁切换

v-for:用来循环遍历数据,包含数组和对象

v-bind: 绑定属性,支持自定义属性 简写为:

v-on: 绑定方法 方法名需要在methods中定义 简写为@

v-model: 用于双向数据绑定,只能用于表单元素

注意:@绑定事件中,需要调用data中的数据,必须要添加this,此时this指向的是实例对象。

 关于:key的使用 
 :key可以通过自定义属性的绑定来确定唯一值。

二,表单元素
单选--radio:需要出现互斥情况,那么需要通过value绑定属性值,此时v-model会通过value值找到对应的属
性进行绑定。
下拉框--multipe 实现下拉框中菜单的多选。

复选框--chexkbox 默认的初始值类型为数组,如果是其他数据类型,则直接转换为布尔类型。

三,修饰符
1.事件修饰符 stop阻止事件冒泡 prevent阻止默认事件 capture事件捕获 once只触发一次 self只能由
事件元素本身触发

2.键盘修饰符 @keydown.up/down/right/left/enter....

3.表单修饰符 v-model.lazy懒加载,即光标离开输入之后更新数据
v-model.number只判断第一个字符是否为数字,如果是返回类型为number,否则返回字符串
v-model.trim过滤收尾空格,只能过滤用户输入的内容,不能过滤初始值

Vue的学习-1.关于指令,修饰符

原文:https://www.cnblogs.com/syy-bk/p/13903886.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!