VUE基础

一， 监听器 watch

1. 用于监听数据的变化并执行相应的操作，通过 watch 选项，您可以监视一个特定的数据属性，并在该属性发生变化时执行一些逻辑

点击查看代码

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

二， 过滤器 filter
在 Vue 中，过滤器（Filter）是一种用于处理文本格式化的功能。过滤器可以在数据渲染之前对数据进行一些特定的处理，例如格式化日期、转换大小写、截取字符串等。Vue 提供了一种简单的方式来定义和使用过滤器。

点击查看代码

<template>
  <div>
    <p>{{ message | capitalize }}</p>
    <p>{{ date | formatDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world',
      date: '2022-01-01'
    };
  },
  filters: {
    capitalize(value) {
      if (!value) return '';
      return value.charAt(0).toUpperCase() + value.slice(1);
    },
    formatDate(value) {
      if (!value) return '';
      return new Date(value).toLocaleDateString();
    }
  }
};
</script>