vue基础-filter过滤器

麻瓜呀

于 2022-05-26 21:26:45 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue基础文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41421033/article/details/124993029

Vue基础专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了Vue.js中过滤器的使用方法，包括基本用法、语法格式及如何定义自定义过滤器。同时展示了过滤器如何带参数使用，并提供了多个示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

filter过滤器

1. 作用

转换格式, 把变量或者表达式转换出来 -

2. 语法:

{{ 表达式 | 方法名 }}

3. 代码示例

<template>
  <div>
    <h1>价格: {{ price }}</h1>
    <h1>{{ price | rmb }}</h1>
    <h1>{{ price | dollar }}</h1>
    <h1>{{ price | oy }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
    };
  },
  // filters
  filters: {
    // 过滤器声明为方法
    rmb(value) {
      // 方法需要返回一个值
      return "￥" + value;
    },
    oy(val) {
      return "€" + val;
    },
  },
  methods: {},
};
</script>

<style></style>

4. 过滤器带参数使用方式

语法:

 {{表达式 | 过滤器(声明参数)}}

<template>
  <div>
    <h1>{{ money | rmb("$") }}</h1>
    <h1>{{ money | rmb("￥") }}</h1>

    <h1>{{ message | reverse | upper }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: 100,
      message: "abcdefg",
    };
  },
  filters: {
    rmb(value, unit) {
      return unit + value;
    },
    reverse(value) {
      return value.split("").reverse().join("");
    },
    upper(value) {
      return value.toUpperCase();
    },
  },
  methods: {},
};
</script>

<style></style>