在使用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>

export default {
    methods: {
            register(){
                window.console.log(this.$refs.userphone.value)
                window.console.log(this.$refs.userpass.value)
            }
        },
    }
</script>
</template>
  1. 通过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啦!小伙伴们可以去试一试,点赞来一波哦,么么哒

Logo

前往低代码交流专区

更多推荐