键盘(vue练习例子)_vue 打字练习-优快云博客

本文链接：https://blog.youkuaiyun.com/daimomo000/article/details/79356152

本文介绍了一个使用Vue.js实现的简单表单示例，包括账号密码输入及基本验证逻辑。示例中展示了如何利用Vue的v-model指令进行双向数据绑定，并通过v-on指令来监听键盘事件，如tab键导航和回车键提交。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        [v-cloak]{ display: none; }
    </style>
</head>
<body>
<div id="app">
    <div class="row">
        <input type="text" placeholder="请输入账号" v-model="name" v-on:keyup.tab="change"><span class="text-sm">左侧输入框聚焦后按下tab键触发</span>
    </div>
    <div class="row">
        <input type="password" placeholder="请输入密码" v-model="pwd" v-on:keyup.enter="login"><span class="text-sm">左侧输入框聚焦后按下enter键提交</span>
    </div>
    <div class="row">
        <input type="number"  v-model.number="number"><span class="text-sm">{{number}}</span>
    </div>
    <div class="row">
        <input type="text"  v-model.trim="trimstr"><span class="text-sm">{{trimstr}}</span>
    </div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
<script type="text/javascript">
new Vue({
    el: '#app',
    data: {
        name: "",
        pwd:""
    },
    methods: {
        change:function(){
            if(this.name.length == 0)
            {
                alert("请输入账号");
                return false;
            }
            return true;
        },
        login: function() {
            if (this.name.length == 0 || this.pwd.length == 0) {
                alert("请输入完整表单信息");
            } else {
                alert("你提交的信息为:" + this.name+"/"+this.pwd);
            }
        }
    }
});
</script>
</body>
</html>