vue-watch监听器
在Vue.js中,你可以使用watch
属性来监听组件的数据变化。当数据变化时,你可以执行一些逻辑处理。
下面是一个简单的例子,展示了如何在Vue组件中使用watch
属性:
<template>
<div>
<input v-model="message">
<p>Message is: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
},
watch: {
// 当message变化时,这个函数就会被调用
message(newValue, oldValue) {
console.log(`message changed from ${oldValue} to ${newValue}`);
// 这里可以添加更多的逻辑处理
}
}
}
</script>
在这个例子中,当你在输入框中输入内容时,message
数据会更新,同时触发watch
中定义的监听器。监听器会输出一条消息到控制台,并且可以执行其他的逻辑。
评论已关闭