vue获取input值的方法总结

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

原创最新推荐文章于 2025-02-22 12:00:00 发布 · 5k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#vue获取input值 #v-model #ref #input监听 #vue

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文总结了在Vue框架中获取input输入值的三种常见方法：一是利用v-model实现双向数据绑定；二是通过ref获取DOM元素并读取其值；三是使用@input事件监听，结合event对象获取当前输入值。

1、v-model：使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据

 <template>
       <input
            placeholder="请输入你的手机号码"
            type="number"
            v-model="number"
          />
          
       <input
            placeholder="请输入密码"
            type="password"
            v-model="password"
          />
             <input
            type="button"
            value="登陆"
            @click="toLogin"
          />
</template>
<script>
     export default {
            name: 'Login',
            data() {
            return {
                number: '',
                password: ''
            }
        },
        methods: {
            toLogin() {
                   console.log("登陆手机号:",this.number);
                   console.log("登陆密码:",this.password);
            }
        }
    }
      }
</script>

2、通过ref获取dom元素，再获取值（类似于原生的获取dom元素）

 <template>
       <input
            type="text"
            ref="textDom"
          />
</template>
<script>
     export default {
            name: 'Login',
        methods: {
            getText() {
            var textVal = this.$refs.textDom.value;
            console.log("输入的文本内容是:",textVal);
            }
        }
    }
      }
</script>

3、@input 监听输入框，输入框只要输入的值变化了就会触发 input 调用方法实时通过 event.currentTarget.value 获取到数据

	<template>
	  <div class="class">
	    <div>
	      <input type="text" @keyup.enter="textInput" @input="textInput(event)"/>
	    </div>
	  </div>
	</template>
	<script>
    export default {
      name: "textInput",
      data() {
      },
      methods: {
	        textInput(event){
	          console.log("输入的文本内容是:",event.currentTarget.value)
	        }
      	}
    }
   </script>