【vue】三种获取input值的写法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了【vue】三种获取input值的写法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1465字，纯文字阅读大概需要3分钟。

内容图文

一、v-model 表单输入绑定

使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

<template>
  <div>
  <input class="login-input" type="text"  v-model="username" placeholder="请输入账号">
  <input class="login-input" type="password" v-model="password" placeholder="请输入密码">
  <div class="login-button" @click="login" type="submit">登陆</div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data() {
  return {
    username: '',
    password: ''
    }
  },
  methods: {
    login() {
      console.log(this.username)
      console.log(this.password)
    }
  }
}
<script/>

二、@input 监听输入框

输入框只要输入的值变化了就会触发 input 调用 search 数据实时获取通过 event.currentTarget.value 获取到

<template>
  <div class="class">
    <div>
      <input type="text" @keyup.enter="search" @input="search($event)"/>
    </div>
    </div>
</template>
<script>
  export default {
    name: "search",
    data() {
    },
    methods: {
      search(event){
        console.log(event.currentTarget.value)
      }
    }
  }
</script>

三、ref 获取数据

这种方式类似于原生DOM,但是ref获取数据更方便

<template>
  <div class="class">
    <input type="text" ref="getValue" />
    <button @click="subbmitButton">获取表单数据</button>
    </div>
</template>
<script>
  export default {
    name: "page",
    data() {
    },
    methods: {
      subbmitButton(){
        console.log(this.$refs.getValue.value)
      }
    }
  }
</script>

内容总结

以上是互联网集市为您收集整理的【vue】三种获取input值的写法全部内容，希望文章能够帮你解决【vue】三种获取input值的写法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---