900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > Vue中获取input输入框值的两种方式

Vue中获取input输入框值的两种方式

时间:2021-10-24 01:23:49

相关推荐

Vue中获取input输入框值的两种方式

在使用Vue开发中,我们会常常获取input框的值,在这跟大家总结一下我常用的两种方式。

使用ref获取input框的值

<template><div><div class="logininfor"><input type="text" placeholder="手机号码" ref="userphone"><input type="text" placeholder="密码" ref="userpass"><span @click="register()">注册</span></div><p>已有账号?去<span class="zhuce" @click="login()">登录</span></p></div><script>export default {methods: {register(){window.console.log(this.$refs.userphone.value)window.console.log(this.$refs.userpass.value)}},}</script></template>

通过v-model双向绑定,完成input框值获取。

<template><div><div class="logininfor"><input type="text" placeholder="手机号码" v-model="userphone"><input type="text" placeholder="密码" v-model="userpass"><span @click="register()">注册</span></div><p>已有账号?去<span class="zhuce" @click="login()">登录</span></p></div></template><script>export default {data(){return{userphone:"",userpass:""}},methods: {register(){window.console.log(this.userphone,this.userpass)}},}</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。