1.系统修饰键:
.ctrl
.alt
.shift
.meta
注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">doSomething</div>
请注意修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态。换句话说,只有在按住 ctrl 的情况下释放其它按键,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为,请为 ctrl 换用 keyCode:keyup.17。
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
3.v-model语法糖
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
4.v-model checkbox不同点:
没有给checkbox设置value属性 =》勾选为true,取消勾选为false
可以看到有了value属性,v-model 对应的msg 依然是true或false;
我们来改一点代码,通常v-model对应的都是字符串,这次我们初始化为空数组[]
<input type="checkbox" id="vue" value="vue" v-model="msg">
data(){
return {
msg:[]
}
}
结果:['vue','angular'],当是数组时,就不会显示true或false了
5.v-model radio的值为value
6.v-model selected值为option的<option value="abc"></option> value值abc
7. lazy修饰符(失去焦点时才输入框和数据进行同步)
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:
8.number修饰符(可以输入字符,但获取到的值自动过滤字符,只获取数字)
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:
9.trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符: