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>
ok啦!小伙伴们可以去试一试,点赞来一波哦,么么哒