目录
一、按键修饰符
(1)回车键按键修饰符示例
(2)自定义按键修饰符示例
二、v-model修饰符
(1).lazy
(2).number
(3).trim
一、按键修饰符
v-on指令用来进行事件监听(如单击事件、键盘事件等)
v-on监听键盘事件的基本使用示例:
在输入框输入了{{counter}}个字符
执行结果:
在监听键盘事件时,经常需要检查详细的按键。Vue.js允许为v-on在监听键盘事件时添加按键修饰符。例如:
下面列出官方提供的所有按键修饰符别名:
.enter => //enter键
.tab => //tab键
.delete (捕获"删除"和"退格"按键) => //删除键
.esc => //取消键
.space => //空格键
.up => //上
.down => //下
.left => //左
.right => //右
(1)回车键按键修饰符示例
执行结果:
在input框中输入”夏志121″后按下回车键,松开回车键后在浏览器中将弹出对话框”录入内容为:夏志121″。
(2)自定义按键修饰符示例
Vue.js还支持自定义按键修饰符,可以利用按键对应的键码来实现,可以把上面的功能改成松开F2后弹出输入的内容,而F2对应的键码是113,那么久可以对代码进入如下修改:
执行结果:
在input框中输入”你好”后按下F2,松开F2后在浏览器中将弹出”录入内容为:你好”。
二、v-model修饰符
v-model可以实现表单元素和数据的双向绑定。与事件修饰符类似,v-model指令也有修饰符,用于控制数据同步的机制。
(1).lazy
数据在失去焦点或回车时会更新。
v-model的lazy修饰符使用示例:
{{content}}
执行结果:
(2).number
默认情况下,在输入框中输入的内容会被当作字符串类型进行处理,这是HTML的底层逻辑造成的,如果加上number修饰符,就可以让你在输入数字的时候将输入的内容转换成number类型。
v-model的number修饰符使用示例:
【不加number修饰符】输入内容:{{content1}}
【不加number修饰符】数据类型:{{typeof content1}}
【不加number修饰符】输入内容:{{content2}}
【不加number修饰符】数据类型:{{typeof content2}}
执行结果:
分别在第一个输入框和第二个输入框中输入”121″,在浏览器生成的内容如下:
(3).trim
trim修饰符可以去除输入内容左右两边的空格。
v-model的trim修饰符使用示例:
输入内容:{{content}}
执行结果:
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.e1idc.net