Vue开发获取input框的值

最新推荐文章于 2026-05-22 06:50:13 发布

原创最新推荐文章于 2026-05-22 06:50:13 发布 · 1.1w 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

Java 同时被 2 个专栏收录

116 篇文章

订阅专栏

JavaScript

7 篇文章

订阅专栏

本文介绍了在Vue.js中实现输入框值获取的两种常见方式：使用ref直接访问DOM元素获取值与利用v-model进行双向数据绑定来获取值，并提供了具体的代码示例。

一、使用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>