vue中过滤器,用于一些常见的文本格式化,用 | 来操作。

过滤器可以用在两个地方:

1、在{{}}双花括号中插入值

2、v-bind表达式中使用

<!-- 在双花括号中 -->
{{ message | capitalize }} <!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

栗子:

将这里的价格保留两位小数

引入

import {toMoney} from '../filter/moneyFilter.js';

moneyFilter.js文件

export function toMoney (money = 0){
return money.toFixed(2);
}

通过filters属性

filters:{
moneyFilter(money){
return toMoney(money);
}
}

在需要格式化的地方使用

 <div class="rec-price">¥{{item.price | moneyFilter}}</div>

vue filter过滤器简单应用的更多相关文章

  1. Vue.filter 过滤器

    [过滤器] import Vue from '../../../node_modules/vue/dist/vue'; // 后台数据与前端展示数据需要换算,与后台交互的请求的参数是不需要.假如说前端 ...

  2. Filter过滤器简单应用( 接口访问控制 )

    一.描述 在提供安卓.IOS客户端接口时,可以在登陆接口分配Session给客户端,用于判断其他接口是否是合法访问,以避免将所有的接口都暴露在web中可以由路径直接访问.但是最近的一个项目中的移动接口 ...

  3. Filter过滤器简单学习

    Servlet 过滤器方法 过滤器是一个实现了 javax.servlet.Filter 接口的 Java 类.javax.servlet.Filter 接口定义了三个方法: 序号 方法 & ...

  4. VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符

    过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...

  5. vue学习(十五) 过滤器简单实用

    vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式   v-bind表达式  由管道符指示 //过滤器调用时候的格式 {{ name ...

  6. vue的过滤器filter

    前记: 排版记录,未免太耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2 ...

  7. Vue的filter过滤器

    一和二,请参考https://www.cnblogs.com/zui-ai-java/p/11109213.html 三.index.html <!DOCTYPE html> <ht ...

  8. vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  9. vue 中全局filter过滤器的配置及使用

    在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...

随机推荐

  1. LOJ#2019. 「AHOI / HNOI2017」影魔

    题意: 在一个序列中 如果有一个子区间 它有一个端点是区间最大值 另一个端点不是这个区间的次大值 就会有p2的贡献 它两个端点分别是最大值次大值 就会有p1的贡献 我们发现这两个条件有一个重合的部分 ...

  2. Linux 日志分析脚本

    #### 以下代码,若出现无法使用,请根据底下图片,更改参数.根据 apache 日志格式修改 查看 apache 进程ps aux | grep httpd | grep -v grep | wc ...

  3. 500 OOPS: bad bool value in config file for: anon_world_readable_only Login failed.

    [root@hyc ~]# ftp 192.168.254.5 Connected to 192.168.254.5 (192.168.254.5). Welcome to blah FTP serv ...

  4. SES 之全局搜索小记

    @2018-12-17 [小记] SES 使用全局搜索时,变量所在的头文件没有被检索出来,选中检索属性中的 Dependencies 就可以了

  5. 不是说记住rm -rf的教训就够了

    不是说记住rm -rf的教训就够了 李阿玲· 12 天前 2013年,我在同步CTAN镜像的时候,在/home下我的文件夹里面操作了下面的命令: rsync -av --delete rsync:// ...

  6. 第二届强网杯wp

    web web签到 利用了md5碰撞 payload为 param1 =%4d%c9%68%ff%0e%e3%5c%20%95%72%d4%77%7b%72%15%87%d3%6f%a7%b2%1b% ...

  7. 【洛谷P3901】数列找不同

    题目大意:给定一个长度为 N 的序列,每个点被染了一个颜色.现有 M 个询问,每个询问查询区间 [l,r] 内的点是否颜色都是不同的. 题解:莫队裸题. 直接维护区间颜色数,用 cnt[] 记录下区间 ...

  8. 【洛谷P1896】互不侵犯

    题目大意:给定 N*N 的棋盘,一共放 K 个国王,一共有多少种方法. 题解: i&i<<1 判断是否每个 1 的位置之间都有 0. i&j<<1 判断 i 中 ...

  9. Linux编译安装PHP参数说明

    php各参数配置详解 --prefix=/usr/local/php //指定 php 安装目录 --with-apxs2=/usr/local/apache/bin/apxs //整合apache, ...

  10. 第二十八篇-Fragment静态用法

    效果图: 首先,先大致布局成这个形状 看动画中,横看分为两个区域,所以整体是一个水平排列 设置外层LinearLayout的参数 android:orientation="horizonta ...