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

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

相关推荐
小镇程序员15 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐17 分钟前
前端图像处理(一)
前端
程序猿阿伟25 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒26 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪35 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背38 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc1 小时前
学习electron
javascript·学习·electron
盛夏绽放1 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5