vue中的修饰符的应用

港控/mmm° 2024-04-20 08:08 41阅读 0赞

## 修饰符 ##

### .lazy ###

在默认情况下，`v-model` 在每次 `input` 事件触发后将输入框的值与数据进行同步 。你可以添加 `lazy` 修饰符，从而转变为使用 `change` 事件进行同步：

<input v-model.lazy="msg" >

### .number ###

如果想自动将用户的输入值转为数值类型，可以给 `v-model` 添加 `number` 修饰符

效果：

![1364810-20180517110941354-1288458428.png][]

### .trim ###

如果要自动过滤用户输入的首尾空白字符，可以给 `v-model` 添加 `trim` 修饰符：

![复制代码][Image 1]

var other = new Vue({
                el:'#other',
                data:{
        
                    trim:''
                },
                methods:{
                    getStr(){
                        console.log(this.$refs.tr.innerHTML)
                    }
                }
         })</span></pre>

![复制代码][Image 1]

效果：

![1364810-20180517112005544-1537064372.png][]

### 事件修饰符 ###

在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 `v-on` 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

![复制代码][Image 1]

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent=“onSubmit”></form>

<a v-on:click.stop.prevent=“doThat”></a>

<form v-on:submit.prevent></form>

<div v-on:click.capture=“doThis”>…</div>

<div v-on:click.self=“doThat”>…</div>

![复制代码][Image 1]

注意：

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 `v-on:click.prevent.self` 会阻止所有的点击，而 `v-on:click.self.prevent` 只会阻止对元素自身的点击。

<a v-on:click.once="doThis"></a>

### 按键修饰符 ###

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.13="submit">

记住所有的 `keyCode` 比较困难，所以 Vue 为最常用的按键提供了别名：

<input v-on:keyup.enter="submit">

<input @keyup.enter=“submit”>

全部的按键别名：

*  `.enter`
 *  `.tab`
 *  `.delete` (捕获“删除”和“退格”键)
 *  `.esc`
 *  `.space`
 *  `.up`
 *  `.down`
 *  `.left`
 *  `.right`

### 系统修饰键 ###

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

*  `.ctrl`
 *  `.alt`
 *  `.shift`
 *  `.meta`

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

例如：

<input @keyup.alt.67="clear">

<div @click.ctrl=“doSomething”>Do something</div>

注意：

请注意修饰键与常规按键不同，在和 `keyup` 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 `ctrl` 的情况下释放其它按键，才能触发 `keyup.ctrl`。而单单释放 `ctrl` 也不会触发事件。如果你想要这样的行为，请为 `ctrl` 换用 `keyCode`：`keyup.17。`

[1364810-20180517110941354-1288458428.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/452d55b5cb17473888b46a7c569447d1.png
[Image 1]: 
[1364810-20180517112005544-1537064372.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1472b4d684da4e728e738c4f9eec433f.png