Vue中获取input输入框值的两种方式
在使用Vue开发中,我们会常常获取input框的值,在这跟大家总结一下我常用的两种方式。使用ref获取input框的值<template><div><div class="logininfor"><input type="text" placeholder="手机号码" ref="userphone"><input type="text" pl
·
在使用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>
更多推荐
所有评论(0)