vue 如何给页面添加enter回车事件？

主要代码：

 	@keyup.enter.native="ajaxLoginApi()"   
 	

代码示例：

	<el-form ref="form" :model="form" :label-position="labelPosition" label-suffix=":" label-width="100px" status-icon>
     	   <el-form-item label="手机号码">
                <el-input v-model="form.username" size="mini" @keyup.enter.native="ajaxLoginApi()"></el-input>
           </el-form-item>
           <div class="tips"></div>
           <el-form-item label="密码">
                <el-input type="password" v-model="form.pwd" size="mini" clearable  @keyup.enter.native="ajaxLoginApi()"></el-input>
           </el-form-item>
           <div class="tips"></div>
           <div class="tips"></div>
           <div style="margin-top: 10px;margin-left：0">
             <el-button type="primary" @click="ajaxLoginApi" size="medium">确认登录</el-button>
             <el-button type="" plain size="medium" @click="linkTo('#/register')">立即注册</el-button>
           </div>
     </el-form>

效果图截图：

除了按钮提交，还能在表单校验无误之后，键盘enter回车提交！

以上就是关于 ” vue 给页面添加enter回车事件 - 代码篇 “ 的全部内容。

最后

以上就是平常大门为你收集整理的vue 给页面添加enter回车事件 - 代码篇vue 如何给页面添加enter回车事件？的全部内容，希望文章能够帮你解决vue 给页面添加enter回车事件 - 代码篇vue 如何给页面添加enter回车事件？所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。