浅谈Vue中监听属性—watch监听器的使用方法

作者：System 时间：2024年08月12日分类：所有,vue.js 字数：575

这篇文章距离上次修改已过266天，其中的内容可能已经有所变动。

<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来监听数据属性变化的简单示例。

浅谈Vue中监听属性—watch监听器的使用方法

评论已关闭

推荐阅读