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. [poj1160][IOI2000]Post Office【动态规划】

    传送门 https://vjudge.net/problem/POJ-1160#author=SCU2018 题目描述 在一条水平的公路上建有n个小屋,两个小屋间的距离是它们的横坐标之差的绝对值.保证 ...

  2. rt-thread之 for (fn_ptr = &__rt_init_rti_board_start; fn_ptr < &__rt_init_rti_board_end; fn_ptr++) 理解

    @2019-01-30 [小记] 利用宏 INIT_EXPORT() --- __attribute__() 将函数重新放置在自定义段,执行时去该段获取函数地址 RT-Thread 的 INIT_BO ...

  3. TypeError: __init__() got an unexpected keyword argument 't_command'

    python  .\manage.py migrate 报错如下 λ python .\manage.py migrateTraceback (most recent call last): File ...

  4. JavaWeb项目:在线评测系统

    此项目为本人的Java大作业. 项目文件和相关资源已上传到本人的GitHub 一.项目概况 1.1设计内容 一个在线评测系统,分用户和管理员两种身份.用户能够通过注册登录,参加比赛,最后实时得到比赛结 ...

  5. Linux包系列的知识(附:Ubuntu16.04升级到18.04的案例)

    Linux基础:https://www.cnblogs.com/dunitian/p/4822808.html#linux 之前看到朋友还动不动 apt-get update upgrade,就很纳闷 ...

  6. js jquery select 操作 获取值,选中选项,增加,修改,删除

    select示例: <select id="sel"> <option value="1">one</option> < ...

  7. Linux中OBS在Wayland环境下黑屏只显示鼠标的应对措施

    本文写于2018-02-10.截至到此文完成时,没有已知的方法可以让OBS在Wayland环境下正常工作. 解决方法 放弃使用Wayland,改用X Window 在Wanyland上录制屏幕,可以使 ...

  8. 初入webform的杂七杂八

    客户端---IIS(Internet Information Services的缩写,意为互联网信息服务管理器)---.NET framework---数据库 1.Repeater控件:对应的集合有5 ...

  9. 第三十四篇-Palette(调色板)的使用

    由于屏幕录制图片转换关系,不甚清晰,还是附上效果图 可以看出,上面文字和背景颜色确实会根据图片的变化而变化. 里面有3个组件,toolbar,textview,imageview,其中textview ...

  10. 4招搞定项目年终总结,还有9大PPT模板免费送

    作为一名合格的项目经理 一到年末,我们的头等大事就来了 那就是写项目年终总结和计划 但是………初入这行的项目经理有点犯难,因为 不 会 写   不用怕,小编送你年终总结秘籍和好看的PPT模板 先来看秘 ...