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

devnotbug

于 2024-05-01 11:45:00 发布

阅读量842

点赞数 26

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52602294/article/details/138357362

版权

在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-if或v-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>