vue常用的修饰符

1.v-model的修饰符

  • .lazy（类贼）修饰符:v-model默认是在input事件中同步输入框的数据的，也就是说，一旦有数据发生改变，对应的data中的数据就会自动发生改变，lazy修饰符可以让数据失去焦点或者回车时才会更新
  • .number修饰符:在输入框中，无论我们输入的是数字还是字母，都会被当做字符串类型进行处理，
  • .trim（垂木）修饰符:去除input值两边空格,

2.事件修饰符

  • stop：阻止了事件冒泡，相当于调用了event.stopPropagation方法
  • prevent：阻止了事件的默认行为，相当于调用了event.preventDefault方法
  • self（赛奥服）：只当在 event.target 是当前元素自身时触发处理函数
  • once：绑定了事件以后只能触发一次，第二次就不会触发
  • capture：使事件触发从包含这个元素的顶层开始往下触发
  • passive（趴ser屋）：在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符
  • native（内体屋）：让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件

3.修饰符的应用场景

  • .stop：阻止事件冒泡
  • .native：绑定原生事件
  • .once：事件只执行一次
  • .self ：将事件绑定在自身身上，相当于阻止事件冒泡
  • .prevent：阻止默认事件
  • .caption：用于事件捕获
  • .once：只触发一次
  • .keyCode：监听特定键盘按下
  • .right：右键

4.按键修饰符

  1. @click.ctrl:All或shif被一同按下时才会触发
  2. @click.ctrl.exact:只有在Ctrl被按下的时候才会触发
  3. @click.exact:没有任何系统修饰符被按下的时候触发
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue