vue中侦听器

2023-12-13 19:00:58

Vue中的侦听器是一种跟踪数据变化的方法。使用侦听器可以监听指定数据项的变化,并在数据项的值发生变化时执行指定的函数。

侦听器的语法如下:

watch: {
  数据项名: {
    handler: function(newValue, oldValue) {
      // 处理数据变化的逻辑
    },
    deep: true
  }
}

其中,handler是侦听器的回调函数,可以接收两个参数:

  • newValue:数据项新的值
  • oldValue:数据项旧的值

另外,可以通过deep选项设置是否深度监听对象和数组的变化。

下面是一个例子,用到了侦听器来监听一个数据项的变化:

<template>
  <div>
    <p>总金额:{{ total }}</p>
    <input v-model="num" placeholder="请输入商品数量" />
    <input v-model="price" placeholder="请输入商品单价" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      price: 0,
      total: 0
    }
  },
  watch: {
    num: {
      handler() {
        this.calcTotal()
      }
    },
    price: {
      handler() {
        this.calcTotal()
      }
    }
  },
  methods: {
    calcTotal() {
      this.total = this.num * this.price
    }
  }
}
</script>

在这个例子中,我们监听了num和price两个数据项的变化,并在变化时调用了calcTotal方法来计算总金额。

文章来源:https://blog.csdn.net/song19990524/article/details/134890283
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。