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

1. v-model 表单输入绑定

//使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理            登陆    export default {       name: 'Login',       data() {            return {                username: '',                password: ''            }        },        methods: {            login() {                   console.log(this.username)                   console.log(this.password)            }        }    } 

2. @input 监听输入框

//输入框只要输入的值变化了就会触发 input 调用 searchexport default {name: "Search",data() {},methods: {search(event){console.log( event.currentTarget.value )}}}

3. @change 监听输入框

//输入框失去焦点时，输入的值发生了变化，就会触发 change 事件export default {name: "Search",data() {},methods: {search(event){console.log( event.target.value )}}}

4. ref 获取数据

//这种方式类似于原生DOM,但是ref获取数据更方便获取表单数据    export default {name: "Page",data() {},methods: {subbmitButton(){console.log( this.$refs.inputDom.value )}}}