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时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...
随机推荐
- python学习日记(格式化输出,初始编码,运算符)
格式化输出 顾名思义,按照个人意愿定制想输出的格式. name = input('请输入姓名:') age = int(input('请输入年龄:')) job = input('请输入工作:') h ...
- 使用matplotlib.pylab绘制分段函数
1.安装matplotlib pip3 install matplotlib sudo apt install python3-tk 2.分段函数 from pylab import * x = li ...
- 老铁,告别postman,用pycharm来调接口,顺便把接口脚本也写了
最近,一位同事在用postman调涉及到依赖的接口的时候 postman设置了环境变量,但是老是获取不到依赖接口返回的值,至于的啥原因呢,@#¥%……&*()! 其实,用pycharm一样可以 ...
- Spring Boot 与 OAuth2 官方最详细教程
https://mp.weixin.qq.com/s?__biz=MzU0MDEwMjgwNA==&mid=2247484357&idx=1&sn=73e501de8591e6 ...
- 洛谷P4206 聪聪与可可
无向简单图上给定s,t.每秒s先向t按照最短路走两步(优先节点编号较小的),然后t随机行动一步. 问期望多少秒相遇.n <= 1000 解: 这个s太蛇皮了...所以预处理一波. 然后不会,看题 ...
- js 日期比较大小,js判断日期是否在区间内,js判断时间段是否在另外一个时间段内
/** * 日期解析,字符串转日期 * @param dateString 可以为2017-02-16,2017/02/16,2017.02.16 * @returns {Date} 返回对应的日期对 ...
- ImageMagick: win7 | win8 & uac (用户帐户控制) 注册表的一些事
现在用win7,win8的人越来越多了, 程序在一些 win 7, win8 上运行会遇到一些之前没想过的兼容性问题. 比如 64位系统运行32位程序时的注册表重定向,还有因为 uac (用户帐户控制 ...
- 第五篇:数据备份、pymysql模块
http://www.cnblogs.com/linhaifeng/articles/7525619.html#_label3 一 IDE工具介绍 生产环境还是推荐使用mysql命令行,但为了方便我们 ...
- javascript 请求action传递中文参数乱码问题
1.js $.ajaxFileUpload ( { url:'<%=basePath%>uploadDatFile/fil ...
- java操作redis集群配置[可配置密码]和工具类(比较好用)
转: java操作redis集群配置[可配置密码]和工具类 java操作redis集群配置[可配置密码]和工具类 <dependency> <groupId>red ...