watch的基本使用

最新推荐文章于 2024-09-14 18:52:56 发布

yezi153

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量162

点赞数

文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/yezi153/article/details/120891072

版权

Vue watch 数据绑定属性监听 Vue组件

关键词由CSDN通过智能技术生成

<template>
  <div class="watch-container">
    <input type="text" v-model="num" />
    <input type="text" v-model="obj.age" />
    <button @click="clickFn">点击加1</button>
    <button @click="clickFn1">点击年龄改变</button>
    <button @click="clickFn2">点击年龄加1</button>
  </div>
</template>

<script>
export default {
  name: "watch",
  data() {
    return {
      num: 3,
      obj: {
        age: 18,
      },
    };
  },
  watch: {
    // 基础用法
    // num(newVal, oldVal) {
    //   console.log(newVal, oldVal);
    // },
    age(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
    // 完整写法
    num: {
        handler(newVal, oldVal) {
            console.log(newVal, oldVal);
        },
        // 第一次赋值就执行
        immediate: true,
        // 当要监听对象或数组的时候需要添加deep:true属性
    }
  },
  methods: {
    clickFn() {
      this.num += 1;
    },
    clickFn1() {
      if (this.obj.age >= 18) {
        console.log("成年了");
      } else {
        console.log("没成年");
      }
    },
    clickFn2() {
        this.obj.age++
    }
  },
};
</script>

<style>
</style>