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时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...
随机推荐
- 【HDU - 4341】Gold miner(分组背包)
BUPT2017 wintertraining(15) #8B 题意 给出每个黄金的坐标.价值及耗时,同一方向的黄金只能依次取,求T时间内收获的最大值. 题解 同一方向,物品前缀和构成的组合,相当于是 ...
- 【Tsinsen A1339】JZPLCM (树状数组)
Description 原题链接 给定一长度为\(~n~\)的正整数序列\(~a~\),有\(~q~\)次询问,每次询问一段区间内所有数的\(~LCM~\)(即最小公倍数).由于答案可能很大,输出 ...
- 【题解】 bzoj3693: 圆桌会议 (线段树+霍尔定理)
bzoj3693 Solution: 显然我们可以把人和位置抽象成点,就成了一个二分图,然后就可以用霍尔定理判断是否能有解 一开始我随便YY了一个\(check\)的方法:就是每次向后一组,我们就把那 ...
- [luogu2051][bzoj1801][AHOI2009]chess中国象棋【动态规划】
题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法.大家肯定很清楚,在中国象棋中炮的行走方式是 ...
- 【codevs4927】线段树练习
题目大意:维护一个序列,支持区间加.区间染色.区间最值查询.区间和查询. 题解:对于区间赋值操作来说,维护一个赋值标记,注意,这里不能直接用赋值的值直接维护,因为不像加法标记,0 表示不用处理,这里 ...
- 在 vue.js 中动态绑定 v-model
在最近的项目中(基于vue),有一个需求就是通过 v-for 动态生成 input.在正常情况下,页面中的input数量是固定的,而且每个input绑定的v-model也是固定的,我们可以在 data ...
- Xml二(解析思想)、
XML解析: * 解析xml可以做: * 如果xml作为配置文件:读取 * 如果xml作为传输文件:写,读 * xml解析思想: * DOM:将文档加载进内存,形成一颗dom树(document对象) ...
- css的简单学习笔记
1.CSS的简介 *css :层叠样式表 **层叠: 一层一层. **样式表: 具有大量的属性和属性值 *使得页面的显示效果更加好. *css将网页内容和显示样式进行分离,提高了显示功能. *css不 ...
- Day11--Python--函数名,闭包,迭代器
通过 lst.__iter__()拿到lst.的迭代器 1.函数名第一类对象 函数名就是变量名 1.函数名可以像变量一样互相赋值. 2.可以作为函数的参数,进行传递 3.可以作为返回值返回 4.可以作 ...
- go操作redis和mysql示例
一:redis示例 使用redis的包是: github.com/garyburd/redigo/redis 1:编写第一个示例: 链接,设置,获取 redis_basic.go package ma ...