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

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

相关推荐
涔溪32 分钟前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞43 分钟前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
前端郭德纲1 小时前
浏览器是加载ES6模块的?
javascript·算法
JerryXZR1 小时前
JavaScript核心编程 - 原型链 作用域 与 执行上下文
开发语言·javascript·原型模式
帅帅哥的兜兜1 小时前
CSS:导航栏三角箭头
javascript·css3
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss