vue filter过滤器简单应用
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过滤器简单应用的更多相关文章
- Vue.filter 过滤器
[过滤器] import Vue from '../../../node_modules/vue/dist/vue'; // 后台数据与前端展示数据需要换算,与后台交互的请求的参数是不需要.假如说前端 ...
- Filter过滤器简单应用( 接口访问控制 )
一.描述 在提供安卓.IOS客户端接口时,可以在登陆接口分配Session给客户端,用于判断其他接口是否是合法访问,以避免将所有的接口都暴露在web中可以由路径直接访问.但是最近的一个项目中的移动接口 ...
- Filter过滤器简单学习
Servlet 过滤器方法 过滤器是一个实现了 javax.servlet.Filter 接口的 Java 类.javax.servlet.Filter 接口定义了三个方法: 序号 方法 & ...
- VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符
过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...
- vue学习(十五) 过滤器简单实用
vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式 v-bind表达式 由管道符指示 //过滤器调用时候的格式 {{ name ...
- vue的过滤器filter
前记: 排版记录,未免太耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2 ...
- Vue的filter过滤器
一和二,请参考https://www.cnblogs.com/zui-ai-java/p/11109213.html 三.index.html <!DOCTYPE html> <ht ...
- vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- vue 中全局filter过滤器的配置及使用
在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...
随机推荐
- 【转】Qt之JSON保存与读取
简述 许多游戏提供保存功能,使得玩家在游戏中的进度可以被保存,并在以后再玩的时候进行加载.保存游戏的过程通常涉及将每个游戏对象的成员变量序列化为文件.要实现这个功能,可以采取许多格式,其中之一就是 J ...
- Nagios故障 CHECK_NRPE: Socket timeout after 10 seconds.
Nagios 的警报信息如下,意思是 nrpe 进程执行某些脚本超过了 10 秒钟,就会发警报 CHECK_NRPE: Socket timeout after 10 seconds 修改 comma ...
- 反射中Class.forName()和classLoader的区别
搞清楚两者之间区别前,我们来了解下类加载过程. 一.类加载过程 1.加载 通过一个类的全限定名来获取定义此类的二进制字节流. 将这个字节流所代表的静态存储结构转化为方法区的运行时数据结构. 在内存中生 ...
- ViewHolder模式的简洁写法
大家通常怎么写ViewHolder呢? ViewHolder holder = null; if(convertView == null){ convertView = mInflater.infla ...
- 【Nowcoder71E】组一组(差分约束,最短路)
[Nowcoder71E]组一组(差分约束,最短路) 题面 Nowcoder 题解 看到二进制显然就直接拆位,那么区间的按位或和按位与转成前缀和之后,可以写成两个前缀和的值的差的大小关系,那么直接差分 ...
- 【BZOJ5292】[BJOI2018]治疗之雨(高斯消元)
[BZOJ5292][BJOI2018]治疗之雨(高斯消元) 题面 BZOJ 洛谷 题解 设\(f[i]\)表示剩余\(i\)点生命时的期望死亡的次数. 考虑打\(k\)次下来脸上被打了\(i\)下的 ...
- [SNOI2017]一个简单的询问【莫队+容斥原理】
题目大意 给你一个数列,让你求两个区间内各个数出现次数的乘积的和. 分析 数据范围告诉我们可以用莫队过. 我并不知道什么曼哈顿什么乱七八糟的东西,但是我们可以用容斥原理将这个式子展开来. \[\sum ...
- pip 安装第三方包提示Unknown or unsupported command 'install'
Unknown or unsupported command 'install' Unknown or unsupported command 'show' Unknown or unsupporte ...
- Nginx log日志参数详解
$args #请求中的参数值$query_string #同 $args$arg_NAME #GET请求中NAME的值$is_args #如果请求中有参数,值为"?",否则为空字符 ...
- 数组拆分I
题目描述 给定长度为 2n 的数组, 你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) ,使得从1 到 n 的 min(ai, bi) 总和最 ...