VUE2的过滤器使用

<template>
  <div>
    <!-- 过滤器 {{ 值 | 过滤器 }} -->
    <!-- filters -->
    <!-- upper: 能够把值变大写 -->
    <div>{{ 'gaoda' | upper }}</div>
    <!-- pow: 计算次幂 -->
    <div>{{ 2 | pow(3) }}</div>
    <div>{{ 2 | pow(10) }}</div>
    <!-- 求绝对值: 转正数 -->
    <div>{{ 9 | abs }}</div>
    <div>{{ -9 | abs }}</div>
    <!-- 多个过滤器顺序使用 -->
    <div>{{ -3 | abs | pow(3) }}</div>
  </div>
</template>

<script>
export default {
  // 用于存放过滤器
  filters: {
    upper(value) {
      return value.toUpperCase()
    },
    // 带参数的过滤器:
    // {{ value | pow(exp) }}
    pow(value, exp) {
      return Math.pow(value, exp)
    },
    abs(value) {
      return value > 0 ? value : -value
    },
  },
}
</script>

<style lang="scss" scoped></style>