129-Vue中表单修饰符

按键修饰符

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

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

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

• .enter (*)

• .tab

• .delete (捕获“删除”和“退格”键)

• .esc

• .space

• .up

• .down

• .left

• .right

表单修饰符

我们还有其他的修饰符，比如表单上常用的 trim 和 number ：

• 想去除用户输入的前后空格：

trim="val" type="text">
 
data(){
  return {
  	val: "你好，世界"
  }
}

• 希望在input的change之后再更新输入框的值

lazy="val" type="text">

.trim与.lazy可以合并使用：
 
lazy.trim="val" type="text" />
 
二者没有先后顺序

<template>
    <div>
        
        <input type="text" v-model.trim="iptVal">
        <button @click="handleClcik">按钮button>
        <br>
        
        <input type="number" v-model.number="numVal">
        <button @click="handleClcik2">按钮button><br><br>
        
        <input type="text" v-model.lazy="ipt2Val">
        <p>{{ipt2Val}}p>
    div>
template>
 
<script>
export default {
    data () {
        return {
            iptVal:"",
            numVal:"",
            ipt2Val:""
 
        }
    },
    methods:{
        handleClcik(){
            console.log(this.iptVal);
        },
        handleClcik2(){
            console.log(this.numVal, typeof this.numVal);
        }
    }
}
script>

系统修饰键

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

• .ctrl （实测结果：由于mac系统 ctrl+鼠标左键 = 右键 这个功能，所以mac上无法实现）

• .alt

• .shift

• .meta （meta在win上代表⊞键，在mac上代表⌘键）

<input v-on:keyup.alt.67="doSomething">
 
<div v-on:click.ctrl="doSomething">Do somethingdiv>