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. 【CodeForces 730H】Delete Them

    BUPT 2017 summer training (for 16) #1E 题意 找到匹配要删除的文件名们但不匹配其它文件名们的表达式.其中?匹配所有字符,其它字符匹配本身. 题解 如果某个位置出现 ...

  2. zabbix 自定义 nginx 监控模板

    打开zabbix首页→配置→模板→创建模板模板名称:Template App NGINXagent 需添加自定义监控项:UserParameter=nginx.status[*],/bin/bash ...

  3. 【转载】docker 应用之动态扩展容器空间大小

    docker 容器默认的空间是 10G, 如果想指定默认容器的大小(在启动容器的时候指定),可以在 docker 配置文件里通过 dm.basesize 参数指定,比如 docker -d --sto ...

  4. BM算法

    BM算法 用来求解一个数列的递推式. 即给定\(\{x_i\}\)求解一个\(\{a_i\}\),满足\(|a|=m,x_n=\sum_{i=1}^ma_i*x_{n-i}\). 考虑增量法构造. 假 ...

  5. Mysql数据库操作笔记

     如果数据库表字段存在,则删除该表 drop table if exists `table_name` 创建数据库表语句 create table `table_name`( `id` ) not n ...

  6. PHP基础学习----函数

    一.函数的定义 function 函数名([参数1,参数2,参数3,...]){ 函数体: [return 返回值;] } //函数调用 函数名([参数1,参数2,参数3,...]): 二.可变函数 ...

  7. bzoj4198 荷马史诗

    关于Huffman树: 大概就是那样子吧. 是这样的:对于最多只能有k个叉的树,我们想要使得∑val(i) * deep(i)最大 那么我们补0后建立小根堆即可. 最典型例题:合并果子. 然后是这个: ...

  8. A1130. Infix Expression

    Given a syntax tree (binary), you are supposed to output the corresponding infix expression, with pa ...

  9. 全面理解虚拟DOM(1)

    最近一两年前端最火的技术莫过于 reactjs,angularJS,vuejs,即便你没用过也可能听过,像ReactJS由业界顶尖的互联网公司facebook提出,其本身有很多先进的设计思路,比如页面 ...

  10. alias命令使用

    alias 别名 增加别名 alias vi=vim alias api='sudo apt-get install' alias apr='sudo apt-get remove' alias tz ...