vue过滤器初步使用

Vue 的 过滤器(Filters) 允许你在模板中对数据进行格式化或转换,而不需要在计算属性或方法中进行处理。它们通常用于格式化显示的内容(如日期、货币、文本大小等),使得模板代码更简洁。

复制代码
<template>
  <div id="app">
    <ul>
      <li v-for="item in info" :key="item.name">
        <p>{{ item.name }}</p>
        <p>{{ item.price | price }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: [
        {
          name: "apple",
          num: 4,
          price: 99,
        },
        {
          name: "banana",
          num: 14,
          price: 199,
        },
      ],
    };
  },
  filters: {
    price(value) {
      return `${value} 元`;
    },
  },
};
</script>

<style></style>

效果如图

前端从后端获取数据,例如多少钱,要把钱加上货币符号,或者单位。

复制代码
filters: {
    price(value) {
      return `${value} 元`;
    },
  },

过滤器与data同级,写在export default下,price是过滤器名称,(value)是传递参数,把处理的数据传进来,就写value,最后用插值表达式写出来

插值表达式{{目标值|过滤器名称}}

相关推荐
RaidenLiu9 分钟前
从 Provider 迈向 Riverpod 3:核心架构与迁移指南
前端·flutter
前端进阶者10 分钟前
electron-vite_18Less和Sass共用样式指定
前端
数字人直播12 分钟前
稳了!青否数字人分享3大精细化AI直播搭建方案!
前端·后端
江城开朗的豌豆15 分钟前
我在项目中这样处理useEffect依赖引用类型,同事直呼内行
前端·javascript·react.js
听风的码17 分钟前
Vue2封装Axios
开发语言·前端·javascript·vue.js
转转技术团队18 分钟前
前端安全防御策略
前端
掘金一周24 分钟前
被老板逼出来的“表格生成器”:一个前端的自救之路| 掘金一周 8.21
前端·人工智能·后端
白嫖叫上我27 分钟前
js如何循环HTMLCollection
javascript
cc_z30 分钟前
vue代码优化
前端·vue.js
卷卷卷土重来31 分钟前
C++单例模式
javascript·c++·单例模式