首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue获取input值

Vue获取input值的四种常用方法

2023-09-17 09:43:46 作者：凡大来啦

Vue是一种流行的Web开发框架,它提供了一个双向绑定的语法糖。在Vue中,我们可以很容易地获取页面上的数据,并且可以实时的响应其变化,这篇文章主要给大家介绍了关于Vue获取input值的四种常用方法,需要的朋友可以参考下

1. 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/>

2. @input 监听输入框

//输入框只要输入的值变化了就会触发 input 调用 search	
<template>
	<div class="class">
		<div>
			<input type="text" @input="search"/>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Search",
		data() {
		},
		methods: {
			search(event){
				console.log( event.currentTarget.value )
			}
		}
	}
</script>

3. @change 监听输入框

//输入框失去焦点时，输入的值发生了变化，就会触发 change 事件
<template>
	<div class="class">
		<div>
			<input type="text" @change="search"/>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Search",
		data() {
		},
		methods: {
			search(event){
				console.log( event.target.value )
			}
		}
	}
</script>

4. ref 获取数据

//这种方式类似于原生DOM,但是ref获取数据更方便
<template>
	<div class="class">
		<input type="text" ref="inputDom" />
		<button @click="subbmitButton">获取表单数据</button>
	</div>
</template>
<script>
    export default {
		name: "Page",
		data() {
		},
		methods: {
			subbmitButton(){
				console.log( this.$refs.inputDom.value )
			}
		}
	}
</script>

附：vue如何判断输入框是否有值

在Vue中判断输入框是否有值的方法有多种。以下是其中两种常用的方法：

绑定v-model指令：将输入框的值绑定到Vue实例的数据属性上，然后通过判断该数据属性的值来判断输入框是否有值。例如：

<template>
  <input type="text" v-model="inputValue" />
  <button @click="checkInput">检查输入框是否有值</button>
</template>
<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    checkInput() {
      if (this.inputValue) {
        console.log('输入框有值')
      } else {
        console.log('输入框为空')
      }
    }
  }
}
</script>

使用ref引用：给输入框添加一个ref属性，然后通过$refs来获取输入框元素的引用，再通过判断输入框元素的value属性来判断输入框是否有值。例如：

<template>
  <input type="text" ref="myInput" />
  <button @click="checkInput">检查输入框是否有值</button>
</template>
<script>
export default {
  methods: {
    checkInput() {
      if (this.$refs.myInput.value) {
        console.log('输入框有值')
      } else {
        console.log('输入框为空')
      }
    }
  }
}
</script>

总结

到此这篇关于Vue获取input值的四种常用方法的文章就介绍到这了,更多相关Vue获取input值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！