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>
参考:
https://www.cnblogs.com/zbl3033/p/13394855.html