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时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...
随机推荐
- Linux iptables设置
先举例子说明,若服务器网卡: eth0 10.10.0.100 eth0:0 10.10.0.200 eth0:1 10.10.0.201 eth0:2 10.10.0.202 只允许10.10.0. ...
- 【Tsinsen A1039】【bzoj2638】黑白染色 (BFS树)
Descroption 原题链接 你有一个\(n*m\)的矩形,一开始所有格子都是白色,然后给出一个目标状态的矩形,有的地方是白色,有的地方是黑色,你每次可以选择一个连通块(四连通块,且不要求颜色一样 ...
- JXOI 2017 简要题解
「JXOI2017」数列 题意 九条可怜手上有一个长度为 \(n\) 的整数数列 \(r_i\) ,她现在想要构造一个长度为 \(n\) 的,满足如下条件的整数数列 \(A\) : \(1\leq A ...
- django restframework 环境配置
Requirements: coreapi (1.32.0+) - Schema generation support.Markdown (2.1.0+) - Markdown support for ...
- Codeforces Round #516 (Div. 2)D. Labyrinth(BFS)
题目链接:http://codeforces.com/contest/1064/problem/D 题目大意:给你一个n*m的图,图中包含两种符号,'.'表示可以行走,'*'表示障碍物不能行走,规定最 ...
- ACM-ICPC 2015 ChangChun
比赛链接 :点击这里 大概会写 F G J L 吧 F 给你一个序列 最多删除一个数使他构成 最长不上升或者不下降子序列 这题不会不会on的算法只能 t*n*logn 了 还是压常过 求两次 LIS ...
- hihocoder1364 奖券兑换
题目链接 思路 乍一看这是一个01背包的裸题.但是数据范围\(10^5\)是无法承受的. 但是发现\(p_i\)和\(w_i\)只有10,也就是说最多只有100种物品.所以可以对他们进行分组.然后用二 ...
- 灰度发布/AB test
背景 互联网产品有一个特点,就是不停的升级,升级,再升级.一般采用敏捷开发的团队,基本上保持每周一次的发布频率,系统升级总是伴随着风险,新旧版本兼容的风险,用户使用习惯突然改变而造成用户流失的风险,系 ...
- 不通过百川打开淘宝app
private void openTaobao(String url){ if (isAppInstalled(this, "com.taobao.taobao")) { //这行 ...
- tuple数组、文件操作
halcon自带案例的学习. Tuple1 := [,,,,] //数组 Number := |Tuple1| //元素个数 SingleElement := Tuple1[] Part := Tup ...