Vue.js按键修饰符及v-model修饰符示例详解
一、按键修饰符
v-on指令用来进行事件监听（如单击事件、键盘事件等）
v-on监听键盘事件的基本使用示例：
<div id="root">
<input type="text" v-on:keyup="counter+=1">
<p>在输入框输入了{{counter}}个字符</p>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
counter: 0
},
methods: {
}
})
</script>执行结果：
在监听键盘事件时，经常需要检查详细的按键。Vue.js允许为v-on在监听键盘事件时添加按键修饰符。例如：
<!-- 只有在'key'是'enter'时调用'submit()'--> <input v-on:keyup.enter="submit()"> <!-- 缩写语法 --> <input @keyup.enter="submit">
下面列出官方提供的所有按键修饰符别名：
.enter => //enter键 .tab => //tab键 .delete (捕获"删除"和"退格"按键) => //删除键 .esc => //取消键 .space => //空格键 .up => //上 .down => //下 .left => //左 .right => //右
（1）回车键按键修饰符示例
<div id="root">
<input type="text" v-model="content" v-on:keyup.enter="fun(content)">
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content: ''
},
methods: {
fun:function(data){
alert('录入内容为：'+data);
this.content='';
}
}
})
</script>执行结果：
在input框中输入"夏志121"后按下回车键，松开回车键后在浏览器中将弹出对话框"录入内容为：夏志121"。
（2）自定义按键修饰符示例
Vue.js还支持自定义按键修饰符，可以利用按键对应的键码来实现，可以把上面的功能改成松开F2后弹出输入的内容，而F2对应的键码是113，那么久可以对代码进入如下修改：
<div id="root">
<input type="text" v-model="content" v-on:keyup.113="fun(content)">
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content: ''
},
methods: {
fun:function(data){
alert('录入内容为：'+data);
this.content='';
}
}
})
</script>执行结果：
在input框中输入"你好"后按下F2，松开F2后在浏览器中将弹出"录入内容为：你好"。
二、v-model修饰符
v-model可以实现表单元素和数据的双向绑定。与事件修饰符类似，v-model指令也有修饰符，用于控制数据同步的机制。
（1）.lazy
v-model默认是在input事件中同步输入框中的内容的，即一旦有数据发生改变，对应data中的数据就会自动发生改变。若使用lazy修饰符，可以让数据在失去焦点或回车时会更新。
v-model的lazy修饰符使用示例：
<div id="root">
<input v-model.lazy="content">
<div>{{content}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content:"这是content"
},
methods: {
}
})
</script>执行结果：
（2）.number
默认情况下，在输入框中输入的内容会被当作字符串类型进行处理，这是HTML的底层逻辑造成的，如果加上number修饰符，就可以让你在输入数字的时候将输入的内容转换成number类型。
v-model的number修饰符使用示例：
<div id="root"><br><br>
<input v-model="content1">
<div>【不加number修饰符】输入内容：{{content1}}</div>
<div>【不加number修饰符】数据类型：{{typeof content1}}</div>
<input v-model.number="content2">
<div>【不加number修饰符】输入内容：{{content2}}</div>
<div>【不加number修饰符】数据类型：{{typeof content2}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content1:"这是content1",
content2:"这是content2"
},
methods: {
}
})
</script>执行结果：
分别在第一个输入框和第二个输入框中输入"121"，在浏览器生成的内容如下：
（3）.trim
trim修饰符可以去除输入内容左右两边的空格。
v-model的trim修饰符使用示例：
<div id="root">
<input v-model.trim="content">
<div>输入内容：{{content}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content:"content"
},
methods: {
}
})
</script>执行结果：
到此这篇关于Vue.js按键修饰符及v-model修饰符的文章就介绍到这了,更多相关Vue.js v-model修饰符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
el-upload组件文件上传都是每个文件请求一次接口,本次实现一次请求上传多个文件,下面这篇文章主要给大家介绍了关于使用el-upload组件实现递归多文件上传的相关资料,需要的朋友可以参考下2023-03-03
Vue插槽,是学习vue中必不可少的一节,越来越发现插槽的好用,而过滤数据也是我们日常开发中必然会用到的,这篇文章主要给大家介绍了关于Vue插槽和过滤器的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了vue2.0 实现导航守卫的具体用法（路由守卫），vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards），具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要介绍了vue3配置全局参数(挂载全局方法)以及组件的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
今天小编就为大家分享一篇vue2使用keep-alive缓存多层列表页的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
今天小编就为大家分享一篇浅谈vue-router路由切换 组件重用挖下的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue使用Canvas在画布上添加图片方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
本文主要介绍了Vue3+cesium环境搭建的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-08-08
这篇文章主要为大家详细介绍了Vue使用screenfull实现全屏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
由于目前公司采用了ProtoBuf做前后端数据交互，进公司以来一直用的是公司大神写好的基础库，完全不了解底层是如何解析的。下面小编给大家分享vue中使用protobuf的过程记录，需要的朋友参考下吧2018-10-10
最新评论