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

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

相关推荐
江城开朗的豌豆10 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician14 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
Django强哥18 分钟前
JSON Schema Draft-07 详细解析
javascript·算法·代码规范
FIN666829 分钟前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD39 分钟前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆39 分钟前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel42 分钟前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒1 小时前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus1 小时前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
Never_Satisfied1 小时前
在JavaScript / HTML中,Chrome报错此服务器无法证实它就是xxxxx - 它的安全证书没有指定主题备用名称
javascript·chrome·html