Vue开发获取input框的值

最新推荐文章于 2025-02-22 12:00:00 发布

小小白兔兔

最新推荐文章于 2025-02-22 12:00:00 发布

阅读量1.1w

点赞数 5

分类专栏： Java JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/InternetJava/article/details/122563503

版权

Java 同时被 2 个专栏收录

116 篇文章

订阅专栏

JavaScript

7 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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