vue方法中传递dom对象示例

最新推荐文章于 2023-09-24 09:03:31 发布

weixin_30627341

最新推荐文章于 2023-09-24 09:03:31 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 后端前端 ViewUI

原文链接：http://www.cnblogs.com/qingsong/p/11575485.html

本文介绍了如何使用Vue.js框架实现输入框只能输入数字的功能。通过在input元素上绑定keyup事件，并利用正则表达式过滤掉非数字字符，确保用户输入的数据格式正确。同时，对比了Vue事件处理与原生JS的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="app">
    <input type="text" v-on:keyup="onlyNum($event)">
</div>

<script>
new Vue({
    el:"#app",
    methods: {
        onlyNum: function (event){
            event.target.value=event.target.value.replace(/[^\d]/g,'');
        }
    }
})
</script>

相当于：

<div id="app">
    <input type="text" onkeyup="onlyNum(this)">
</div>

<script>
        function onlyNum(obj){
            obj.value = obj.value.replace(/[^\d]/g,'');
        }
</script>

js 原生代码的 “this” 相当于vue中 “event.target” 。

转载于:https://www.cnblogs.com/qingsong/p/11575485.html