Vue中获取input输⼊框值的两种⽅式在使⽤Vue开发中,我们会常常获取input框的值,在这跟⼤家总结⼀下我常⽤的两种⽅式。
1. 使⽤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>html获取input输入的数据
export default {
methods: {
register(){
}
},
}
</script>
</template>
2. 通过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(){
}
},
}
</script>
ok啦!⼩伙伴们可以去试⼀试,点赞来⼀波哦,么么哒

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。