vue 监听

作者：——嘘丶低调发布日期:2026-01-16 浏览:80

// 使用 Vue 的 watch 选项来监听数据的变化

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    // 监听 message 属性的变化
    message(newVal, oldVal) {
      console.log('新的值:', newVal);
      console.log('旧的值:', oldVal);
    }
  }
});

// 解释说明:
// 在上面的代码中，我们定义了一个 Vue 实例，并且在 data 中定义了一个名为 message 的属性。
// 使用 watch 选项可以监听 message 属性的变化。每当 message 发生变化时，watch 中对应的函数就会被触发，
// 并且会传入新值 (newVal) 和旧值 (oldVal) 作为参数，方便我们在回调函数中进行处理。

<!-- HTML 部分 -->
<div id="app">
  <input v-model="message" placeholder="编辑我试试">
</div>

/* 如果需要 CSS 样式 */
#app {
  font-family: Arial, sans-serif;
}

上一篇：vue 拖拽

下一篇：vue3路由