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. os x && linux 文件传输基础命令

    一.从服务器下载文件到本机 1.修改文件所属 由于只能下载文件所属为自己的文件,所以要做修改文件所属的操作. chown hudelei /opt/logs/tomcat/app/tomcat_stk ...

  2. 自学华为IoT物联网_03 公共事业物联网常见问题及解决方案

    点击返回自学华为IoT物流网 自学华为IoT物联网_03 公共事业物联网常见问题及解决方案 本文从以下六项公共事业,看看物联网的解决方案: 停车问题 路灯管理问题 消防栓管理问题 井盖管理问题 水表管 ...

  3. 【bfs】仙岛求药

    [题目描述] 少年李逍遥的婶婶病了,王小虎介绍他去一趟仙灵岛,向仙女姐姐要仙丹救婶婶.叛逆但孝顺的李逍遥闯进了仙灵岛,克服了千险万难来到岛的中心,发现仙药摆在了迷阵的深处.迷阵由M×N个方格组成,有的 ...

  4. Python 分布式进程

    #-*-coding:utf-8-*- '''分布式进程指的是将Process进程分不到多台机器上,充分利用多台机器的性能完成复杂的任务''' #服务器端 #--------------------- ...

  5. Sublime使用小记

    Jason转换插件: 多行编辑快捷键:Ctrl A全选,再按下 Ctrl Shift L (Command Shift L) 即可同时编辑这些行:鼠标选中文本,反复按 CTRL D (Command ...

  6. java 子类强转父类 父类强转子类

    Java 继承 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为. Java 子类强转父类 父类引用指向子类对象: jav ...

  7. GNOME下让QT应用使用adwaita主题统一外观

    效果展示 使用前 使用后 步骤 Arch Linux下使用AUR安装 sudo yaourt adwaita-qt4 adwaita-qt5 sudo pacman -S qtconfig-qt4 q ...

  8. 洛谷P2805 植物大战僵尸

    题意:给你一张图,每个节点保护若干节点. 当一个节点不被保护的时候,你就可以gay掉它. gay每个节点都有收益(可能为负),求最大总收益. 解:首先发现是一个最大权闭合子图. 把保护关系变成被保护, ...

  9. 【CF131D】Subway

    题目大意:给定一棵 N 个节点的基环树,求各个点到环的最小距离. 题解:除了找环的必须参数之外,对每个点维护一个 fa 即可. 代码如下 #include <bits/stdc++.h> ...

  10. C# Socket的安全关闭

    网络编程中,socket的安全关闭方法 /// <summary> /// Close the socket safely. /// </summary> /// <pa ...