1. 使用v-model指令:在vue中可以使用v-model指令将input元素和组件的data属性进行双向数据绑定,然后通过访问对应的data属性就可以获取input的值。
```html
export default {
data() {
return {
inputValue: ''
}
},
methods: {
handleClick() {
console.log(this.inputValue)
}
}
}
```
2. 使用$refs属性:每个vue实例都有一个$refs属性,它是一个对象,包含了指定了ref属性的所有子组件或者元素。因此,可以使用$refs来访问input元素并获取它的值。
```html
export default {
methods: {
handleClick() {
console.log(this.$refs.myInput.value);
}
}
}
```
3. 使用事件对象:在事件处理函数中,可以使用event.target对象来获取当前触发事件的元素,从而获取input的值。
```html
export default {
data() {
return {
inputValue: ''
}
},
methods: {
handleInput(event) {
this.inputValue = event.target.value;
},
handleClick() {
console.log(this.inputValue);
}
}
}
```