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

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

相关推荐
Apifox10 分钟前
如何让 Apifox 发布的在线文档具备更好的调试体验?
前端·后端·测试
咔咔一顿操作14 分钟前
【CSS 3D 交互】打造沉浸式 3D 照片墙:结合 JS 实现拖拽交互
前端·javascript·css·3d·交互·css3
0x00016 分钟前
Uniapp - 自定义 Tabbar 实现
前端·uni-app
用户4582031531718 分钟前
Flexbox布局上手:10分钟告别垂直居中难题
前端·css
牛蛙点点申请出战19 分钟前
仿微信语音 WaveView 实现
android·前端·ios
yiyesushu20 分钟前
react + next.js + ethers v6 项目实例
前端
明远湖之鱼22 分钟前
巧用 Puppeteer + Cheerio:批量生成高质量 Emoji 图片
前端·爬虫·node.js
落笔忆梦23 分钟前
利用浏览器空闲时间优化资源加载与渲染
前端·javascript
我是日安23 分钟前
Day 2 - 开发环境建置:monorepo
vue.js
艾小码24 分钟前
还在用Vue 2硬撑?升级Vue 3的避坑指南来了!
前端·javascript·vue.js