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,最后用插值表达式写出来

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

相关推荐
stayong17 分钟前
市面主流跨端开发框架对比
前端
武昌库里写JAVA18 分钟前
C语言 函数指针和指针函数区别 - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
一米八二的矮个子21 分钟前
JavaScript语法进阶(一)
javascript
庞囧30 分钟前
大白话讲 React 原理:Scheduler 任务调度器
前端
liyi_hz200831 分钟前
O2OA (翱途)开发平台新版本发布预告:架构升级、性能跃迁、功能全面进化
android·java·javascript·开源软件
东华帝君43 分钟前
react 虚拟滚动列表的实现 —— 动态高度
前端
CptW1 小时前
手撕 Promise 一文搞定
前端·面试
温宇飞1 小时前
Web 异步编程
前端
腹黑天蝎座1 小时前
浅谈React19的破坏性更新
前端·react.js
东华帝君1 小时前
react组件常见的性能优化
前端