vue3中,input, 每次输入内容触发方法
在 Vue 3 中,你可以监听 input 元素的 input
事件来响应用户的输入。以下是一个示例:
<template>
<input @input="handleInput" />
</template>
<script>
export default {
methods: {
handleInput(event) {
// 在这里处理你的输入事件逻辑
console.log('Input value:', event.target.value);
}
}
}
</script>
在这个示例中,每次用户在 input 元素中输入时,都会触发 handleInput
方法。该方法接收一个参数 event
,通过 event.target.value
可以获取到用户输入的内容。
如果你想用 Vue 的双向数据绑定(v-model)来获取和更新输入值,你也可以这样做:
<template>
<input v-model="inputValue" @input="handleInput" />
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.inputValue);
}
}
}
</script>
在这个版本的示例中,v-model
把 inputValue
和 input 元素的 value 属性绑定在一起,所以当用户输入时,inputValue
会自动更新,同时触发 handleInput
方法。