Vue的过滤器(filters)函数用法示例

export default {
  data() {
    return {
      price: 99.9
    }
  },
  // 定义局部过滤器
  filters: {
    currency(value) {
      if (typeof value !== 'number') {
        return value;
      }
      return '¥' + value.toFixed(2);
    }
  }
}

<template>
  <div>
    <!-- 输出：¥99.90 -->
    <p>{{ price | currency }}</p>
  </div>
</template>

import Vue from 'vue';

// 定义全局过滤器
Vue.filter('uppercase', function(value) {
  if (!value) return '';
  return value.toString().toUpperCase();
});

// 创建 Vue 实例
new Vue({
  // ...
});

<template>
  <div>
    <!-- 输出：HELLO WORLD -->
    <p>{{ message | uppercase }}</p>
  </div>
</template>

filters: {
  currency(value) {
    return '¥' + value.toFixed(2);
  },
  discount(value, rate) {
    return value * (rate || 1);
  }
}

<template>
  <div>
    <!-- 输出：¥79.92 -->
    <p>{{ 99.9 | discount(0.8) | currency }}</p>
  </div>
</template>

import dayjs from 'dayjs';
……
filters: {
  formatDate(value, format = 'YYYY-MM-DD') {
    // 这里可以使用日期库如 day.js 进行格式化
    return dayjs(value).format(format)
  }
}

<template>
  <div>
    <!-- 输出：2023/10/15 -->
    <p>{{ date | formatDate('YYYY/MM/DD') }}</p>
  </div>
</template>

export default {
  data() {
    return {
      price: 99.9
    }
  },
  computed: {
    formattedPrice() {
      return '¥' + this.price.toFixed(2);
    }
  }
}

<template>
  <div>
    <!-- 输出：¥99.90 -->
    <p>{{ formattedPrice }}</p>
  </div>
</template>