vue2 && vue3 通用的vue修饰符大全

在vue中, 我们所用的修饰符其实就是一种语法糖,比如说表单判断为空、输入的是否为数字number类型,用这些修饰符可加快我们的开发效率

一、v-model修饰符

v-model 就是其中的一个重要的修饰符,利用 MVVM实现双向绑定;

1、.lazy修饰符

lazy是懒惰的意思,用这个修饰符可以实现输入框的延迟绑定,平时默认的情况下,vue会马上更新,如果我们添加了.lazy修饰符后,只有鼠标光标离开输入框之后,vue才会更新

demo

<template>  
  <input type="text" v-model.lazy="name" placeholder="请输入昵称">  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      name: ''  
    }  
  }  
}  
</script>

2、.number修饰符

number是数字的意思,加上 .number 修饰符的意思是 把我们输入的值格式化为数字,用户输入数字的时候,vue会自动把输入的值转换为number类型;加入输的不是数字类型,vue会把他转换为 NaN

demo

<template>  
  <input type="text" v-model.number="number" placeholder="请输入数字">  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      number: ''  
    }  
  }  
}  
</script>

3、.trim修饰符

trim是减少的意思;是用来去除输入值的空格,如果我们在输入框输入一个空内容的时候,加上这个修饰符,vue会自动输出前后的空格

demo

<template>  
  <input type="text" v-model.trim="center" placeholder="请输入内容">  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      center: ''  
    }  
  }  
}  
</script>

二、表单修饰符

1、.prevent修饰符

prevent 是阻止、阻碍的意思;.prevent修饰符是用来阻止默认行为的,一般用在表单上,阻止表单的默认自动提交;eg: <button type="primary" >登录</button>,这样的按钮,点击表单会立即提交,使用.prevent修饰符可以阻止这种默认行为;

demo

这个demo中,使用.prevent修饰符阻止了表单的默认提交行为。如果用户在输入框中输入文本并点击提交按钮时,login方法会被调用,然后在控制台打印表单数据。我们还需要在方法内调用event.preventDefault()来阻止默认行为,因为.prevent修饰符只阻止事件处理程序,不会阻止默认行为。

<template>  
  <form @submit.prevent="login">  
    <input type="text" v-model="formList" placeholder="Enter data...">  
    <button type="submit">Submit</button>  
  </form>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      formList: ''  
    }  
  },  
  methods: {  
    login(event) {  
      // 阻止表单默认提交行为  
      event.preventDefault()  
      console.log('Form data:', this.formList)  
    }  
  }  
}  
</script>

2、.lazy修饰符

lazy是懒的意思;.lazy修饰符在默认情况下,当表单控件的绑定发生改变时,Vue会立即更新并触发一个重新渲染。使用.lazy修饰符可以延迟这个过程,只有在用户与表单控件发生交互时才进行渲染更新。

demo

.lazy修饰符延迟了输入框的数据绑定。当用户在输入框中输入文本并提交表单时,login方法会被调用,然后在控制台打印表单数据。

<template>  
  <form @submit="login">  
    <input type="text" v-model.lazy="formList" placeholder="Enter data...">  
    <button type="submit">Submit</button>  
  </form>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      formList: ''  
    }  
  },  
  methods: {  
    login(event) {  
      console.log('Form data:', this.formList)  
    }  
  }  
}  
</script>

3、.number修饰符

number是数字的意思;.number修饰符用于将输入的值转换为数字类型。当用户在绑定了.number修饰符的表单控件中输入文本时,文本会被自动转换为数字。

demo

<template>  
  <form @submit="login">  
    <input type="text" v-model.number="formList" placeholder="Enter number...">  
    <button type="submit">Submit</button>  
  </form>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      formList: ''  
    }  
  },  
  methods: {  
    login(event) {  
      console.log('Form data:', Number(this.formList)) // 输出数字类型  
    }  
  }  
}  
</script>

4、.trim修饰符

.trim修饰符是在用户输入时自动移除字符串两端的空格,在form表单控件上,它可以帮助用户避免不必要的空格输入。

demo

.trim修饰符将自动移除输入框中的空格。用户在输入框中输入多少空格,最终的formList变量中只包含没有空格的字符串。

<template>  
  <form @submit="login">  
    <input type="text" v-model.trim="formList" placeholder="Enter text...">  
    <button type="submit">Submit</button>  
  </form>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      formList: ''  
    }  
  },  
  methods: {  
    login(event) {  
      console.log('111111:', this.formList) // 输出移除空格后的字符串  
    }  
  }  
}  
</script>

三、事件修饰符

1、.stop修饰符

stop是停止的意思 ;.stop修饰符用于阻止事件冒泡。使用.stop修饰符时,事件处理器不会将事件冒泡到父元素,只会在当前元素上进行处理。

demo

<template>  
  <div @click="Parent">父元素<div @click.stop="Child">子元素</div></div>  
</template>  
  
<script>  
export default {  
  methods: {  
    Parent() {  
      console.log('点击Parent');  
    },  
    Child() {  
      console.log('点击Child');  
    }  
  }  
}  
</script>

2、.prevent修饰符

prevent也是阻止默认事件;.prevent修饰符用于阻止事件的默认行为。在默认情况下,某些事件(如提交表单、跳转页面等)会有默认行为,使用.prevent修饰符后,这些默认行为会被阻止。

demo

<template>  
  <form @submit.prevent="Submit">  
    <input type="text" v-model="formList" placeholder="Enter data...">  
    <button type="submit">Submit</button>  
  </form>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      formList: ''  
    }  
  },  
  methods: {  
    Submit(event) {  
      // 表单数据,
      console.log('Form data:', this.formList)  
    }  
  }  
}  
</script>

3、.once修饰符

once是一次的意思;.once修饰符用于让事件处理器只触发一次。默认情况下,事件处理器会持续触发直到被移除或再次绑定。使用.once修饰符可以让事件处理器只触发一次,在第一次触发后就会自动移除。

demo

<template>  
  <button @click.once="login">55555</button>  
</template>  
  
<script>  
export default {  
  methods: {  
    login() {  
      console.log('点击一次');  
    }  
  }  
}  
</script>

4、.capture修饰符

capture是捕获、夺取的意思;.capture修饰符用于在捕获模式下触发事件处理器。默认情况下,事件处理器在冒泡模式下触发,也就是说事件首先在目标元素上触发,然后依次冒泡到父元素。使用.capture修饰符可以让事件处理器在捕获模式下触发,事件首先在父元素上触发,然后依次向下传递到目标元素。

demo

<template>  
  <div @click="Parent">父元素<div @click.capture="Child">子元素</div></div>  
</template>  
  
<script>  
export default {  
  methods: {  
    Parent() {  
      console.log('父元素被点击');  
    },  
    Child() {  
      console.log('子元素被点击');  
    }  
  }  
}  
</script>

5、.self修饰符

self 是自己本人的意思;.self修饰符用于只在事件发生在目标元素自身时触发事件处理器。默认情况下,事件处理器会在事件发生在目标元素或其子元素时触发。使用.self修饰符可以让事件处理器只在事件发生在目标元素自身时触发。

demo

<template>  
  <div @click.self="login">5555</div>  
</template>  
  
<script>  
export default {  
  methods: {  
    login() {  
      console.log('我自己被点击时才会触发');  
    }  
  }  
}  
</script>

四、按键修饰符

1、.enter修饰符

enter 是进入、报名、登记;.enter修饰符用于当鼠标或键盘输入聚焦到元素上时触发事件处理器。在DOM更新后,当元素首次被添加到DOM中或者从DOM中被移除时,或者当聚焦状态更改时,该事件处理器会被触发。

demo

<template>  
  <div @focus.enter="Focus">请聚焦我</div>  
</template>  
  
<script>  
export default {  
  methods: {  
    Focus() {  
      console.log('当元素被聚焦时触发');  
    }  
  }  
}  
</script>

2、.delete修饰符

delete 是删除的意思; .delete修饰符用于当元素从DOM中删除时触发事件处理器。在使用Vue的指令如v-ifv-show动态显示或隐藏元素时,该事件处理器会被触发。

demo

<template>  
  <div v-if="show" @blur.delete="Delete">条件显示</div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      show: true  
    }  
  },  
  methods: {  
    Delete() {  
      console.log('元素从DOM中删除时触发');  
    }  
  }  
}  
</script>

3、.tab修饰符

tab 是制表格、空格的意思;.tab修饰符用于在Tab键导航时触发事件处理器。在浏览器支持Tab键导航的情况下,可以使用该修饰符来处理Tab键的导航行为。

demo

<template>  
  <div @tab="Tab">Tab</div>  
</template>  
  
<script>  
export default {  
  methods: {  
    Tab() {  
      console.log('点击Tab键');  
    }  
  }  
}  
</script>

4、.esc修饰符

esc 退出;.esc修饰符用于在按下Esc键时触发事件处理器。在浏览器中,按下Esc键会触发keyup.esc事件。

demo

<template>  
  <div @keyup.esc="Esc">点击Esc键</div>  
</template>  
  
<script>  
export default {  
  methods: {  
    Esc() {  
      console.log('点击Esc键');  
    }  
  }  
}  
</script>

  • 26
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值