vue.js----按键修饰符及其他修饰符

vue.js中，在v-on上添加按键修饰符，可用于监听键盘事件，所有的按键修饰符别名：

.enter  =>  enter 回车键

.tab => tab 键

.delete  (捕获‘删除’和‘退格’键） =》 删除键

.esc =>  取消键；

.space =>  空格键

.up => 上；  .down => 下；  .left => 左；  .right => 右；

自定义按键修饰符别名：

Vue.config.keyCodes.f1 = 113

系统修饰键：（仅在以下修饰符对应的按键被按下时，才会触发对应的事件）

.ctrl      .alt    .shift     .meta (Mac系统对应的是command键，windows系统对应的是空格键左边第二个键)

当系统修饰键和 keyup 事件一起使用时，想要事件触发，修饰键必须处于按下的状态，释放其他键才能触发keyup.ctrl

例如：  <input @keyup.alt="clear" value="alt输入框"> // 按下alt键，释放任意其他按键时才会触发clear方法；

  <input @keyup.alt.67="clear" value="alt输入框">  // 按下alt键，释放键码67对应的c键才会触发clear方法

.exact 修饰符

允许你控制由精确的系统修饰符组合触发的事件；

 <button @click.alt.exact="exact_alt">按下alt键点击鼠标左键触发</button>

鼠标按钮修饰符：  .left    .middle    .right

        <button @click.left="left_btn">点击鼠标左键触发</button>

        <input type="button" @click.middle="middle_btn" value="点击鼠标中键触发">

        <!-- 鼠标右键点击按钮3时弹出提示框，并阻止默认右键菜单 -->

        <input type="button" @click.right.prevent="right_btn" value="点击鼠标右键触发">

其他修饰符：

 .lazy修饰符 :添加lazy修饰符相当于使用change事件进行同步  <input type="text" v-model.lazy="change_txt">---> {{change_txt}}

        不添加相当于使用input事件进行同步：<input type="text" v-model="change_txt2">---> {{change_txt2}} <br>

        .number 修饰符：可以将输入的数字字符转成number类型的（不使用该修饰符，即使输入的是数字，html元素返回的也是字符串类型的数字）；

        <input type="Number" v-model.number="age" >,年龄：{{age}} {{typeof(age)}}

 .trim修饰符   <input type="text" v-model.trim="str"> 文本：{{str}} ,文本长度： {{str.length}}

data中的变量：

   data:{

                str:'',

                age:null,

                change_txt:'',

                change_txt2:'',

                select5:'' }