浅谈Vue中监听属性—watch监听器的使用方法
<template>
<div>
<input v-model="message">
<p>Message is: {{ message }}</p>s
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
},
watch: {
// 使用函数式监听器
message(newValue, oldValue) {
console.log(`Value changed from ${oldValue} to ${newValue}`);
}
}
}
</script>这个例子中，我们创建了一个Vue组件，其中包含一个message数据属性和一个输入框。我们使用v-model来实现双向数据绑定。同时，我们定义了一个watch属性，它是一个对象，对message属性的变更进行监听。当message的值发生变化时，watch中的函数会被调用，并输出旧值和新值。这是Vue中如何使用watch来监听数据属性变化的简单示例。
评论已关闭