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>