vue @change
时间: 2024-10-23 19:20:07 浏览: 23
vue下的@change事件的实现
Vue.js中的`@change`指令是自定义事件处理器,它通常用于处理表单元素(如输入框、下拉菜单等)的值变化事件。当你给这些元素添加`v-model`绑定,并在其上使用`@change`,当用户更改了该元素的值时,这个事件就会触发,你可以在事件处理器中获取到新的值并执行相应的业务逻辑。
例如:
```html
<input type="text" v-model="myValue" @change="handleInputChange">
<script>
export default {
data() {
return {
myValue: '',
};
},
methods: {
handleInputChange(e) {
console.log('Input value changed:', e.target.value);
// 这里可以对新值做进一步的操作
},
},
};
</script>
```
在这个例子中,当用户在输入框中输入内容,`handleInputChange`函数会被调用,显示新的输入值。
阅读全文