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时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...
随机推荐
- 【cf849ABC】
849A - Odds and Ends 问能否将序列划分为奇数个长度奇数的奇数开头奇数结尾的子区间. 一开始想dp..不过没必要. const int N=201000; int n,a[N]; i ...
- 【CodeForces 730H】Car Repair Shop
BUPT 2017 summer training (for 16) #1F 题意 依次有n (1 ≤ n ≤ 200) 个车要修理,每个车希望在s[i]时刻开始修理,时长d[i],如果s[i]后面没 ...
- 关于 atcoder 页面美化的 css
使用方式 把下面代码加入 ESI Stylish 即可. 这是一个 chrome 的插件,可以翻\(~\)墙(或者不需要)去下载. 这是本人瞎魔改的... 代码 Update on 12-17 \(a ...
- hexo+next主题目录解析
默认目录结构: . ├── .deploy ├── public ├── scaffolds ├── scripts ├── source | ├── _drafts | └── _posts ├── ...
- windows7安装docker
因为本机已经安装了git,所以这里取消勾选 配置环境变量 进入到D:\DockerToolbox 将D:\DockerToolbox下的boot2docker.iso 复制到C:\Users\my\. ...
- Vim在图形环境下全屏产生黑边
在终端中运行Vim或运行GVim都会遇到这个问题,当窗口全屏时,左右和底部可能会出现边框,这个边框在终端中的Vim表现为Terminal的背景颜色.下图为SpaceVim+Neovim+Termina ...
- (转)java 序列化ID的作用
序列化ID的作用: 其实,这个序列化ID起着关键的作用,它决定着是否能够成功反序列化!简单来说,java的序列化机制是通过在运行时判断类的serialVersionUID来验证版本一致性的.在进行反序 ...
- js弹出层
js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...
- 数位DP入门题
站点一览: hdu 2089"不要62" hdu 4734"F(X)" poj 3252"Round Numbers" hdu 3709&q ...
- mysql 5.7 启动脚本
最近这段时间,在看mysql,安装了,也应用过,对于生产环境中,一般都选择使用source code安装,在安装的时候可以自定义相关路径和内容,对于生产环境来说更有效.相对于mysql 5.5的安装, ...