vue 全局过滤器(单个和多个过滤器)
参考: https://www.cnblogs.com/liujn0829/p/8622960.html
https://blog.csdn.net/z8735058/article/details/76824548
一、单个过滤器
参考 https://cn.vuejs.org/v2/guide/filters.html
二、多个过滤器
- 新建dfilter.js文件
//可重用方法 过滤器
const dfilters = {
addZeroTwo: function(value) {
if (value > 0 && value < 0.1) {
return value;
}
var value = Math.round(parseFloat(value) * 100) / 100; //一定要用var声明,let会报错
var arr = value.toString().split('.'); if (arr.length === 1) { //个位数
return value.toString() + '.00';
} else {
if (arr[1].length === 1) { //只有一位小数
return value.toString() + '0';
} else {
return value;
}
}
}, addZeroOne: function(value) {
if (value > 0 && value < 0.1) {
return value;
}
var value = Math.round(parseFloat(value) * 100) / 100;
var arr = value.toString().split('.'); if (arr.length === 1) {
return value.toString() + '.0';
} else {
if (arr[1].length === 1) {
return value.toString() + '0';
} else {
return value;
}
}
}
}
export default dfilters; - 在main.js中引入并注册(在new Vue前注册)
import dfilters from '../static/js/dfilters'; for (let key in dfilters) {
Vue.filter(key, dfilters[key]);
} - 在组件中使用
<span>原价:¥{{price|addZeroTwo}}</span>
vue 全局过滤器(单个和多个过滤器)的更多相关文章
- 开发vue全局插件的4种方式
定义全局插件的步骤 定义全局插件 pluginsUtil.js Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: ex ...
- vue全局配置----小白基础篇
今天学习vue全局配置.希望帮助我们去了解vue的全局配置,快速开发. Vue.config是vue的全局配置对象.包含Vue的所有全局属性: silent:boolean(默认值:false)--- ...
- vue全局使用axios插件请求ajax
vue全局使用axios插件请求ajax Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推 ...
- Vue全局异常捕获
之前没注意过这么个小技巧 , 可能在Vue文档里也有 暂时先记下了 方便摘要 Vue全局配置 errorHandler可以进行全局错误收集,我们可以根据这个特性对前端异常做这样的处理:业务错误直接写 ...
- vue全局注册与局部注册的写法
vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用.举个例子,看看写法: <div id="app"> <p>页面载入时,inp ...
- 自定义vue全局组件use使用、vuex的使用
自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们 ...
- Vue全局组件注册
通过Vue.component(‘组件名’, {配置对象})注册全局组件 在main.js中注册全局组件 test import Vue from 'vue' import App from './A ...
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- vue全局错误捕获
1.errorHandler Vue全局配置 errorHandler可以进行全局错误收集,捕获全局错误抛出,避免前端页面挂掉 export default function errorHandl ...
- Vue全局弹窗:一次注册,全局可弹
Vue全局弹窗 今天来搞一个全局弹窗,不用每个文件都引入,只在main.js里作为全局原型引入就好了 先新建弹窗组件 toast.vue <template></template&g ...
随机推荐
- 暴力剪枝——cf1181C
暴力求长度为len时,以i,j为左上角的旗子的数量 不剪枝的话复杂度是n*n*m*n,必定超时 两个可以剪枝的地方:如果格子[i,j]可以作为长度为len的旗子的左上角,那么其必定不可以作为长度> ...
- 获取硬件信息的delphi源码CPUID、操作系统、Mac物理地址、计算机名称、IP地址、用户名
{-----------------------------------------------------------------------------作者:sushengmiyan 2013.0 ...
- angular2 组件内容嵌入(ng-content)
一.简介 内容嵌入是组件的一个高级功能特性,使用组件的内容嵌入特性能很好地扩充组件的功能,方便代码的复用. 二.用法 如上,在模版中使用了<ng-content>标签,这个标签就是用来渲染 ...
- python使用PIL处理图片后返回给前端的坑
一.python代码 这里有个坑,之前没有将bytes图片数据转成base64就返回到前端了,但在前端处理的时候,怎么都显示不出图片来,虽然数据拿到了,但bytes被传到前后变str了,所以怎么搞都没 ...
- (转)谈谈Android中的Rect类——奇葩的思维
最近在工作中遇到了一些问题,总结下来就是Android中Rect这个类造成的.不得不说,不知道Android SDK的开发人员是怎么想的, 这个类设计的太奇葩了.首先介绍一下Rect类:Rect类主要 ...
- Redis-GEO
一. Redis的GEO特性 Redis3.2版本提供了GEO功能,支持存储地理位置信息用来实现诸如摇一摇,附近位置这类依赖于地理位置信息的功能.二. 命令2.1 增加地理位置信息 命令:geoadd ...
- 国外主机如何ICP备案
想都不要想了,无法备案. 因为,备案是在主机服务器提供商处的备案平台提交申请,国外的主机服务商是没有这种平台服务的.(跟你域名在哪儿买的没关系) 下面,把昨天折腾到半夜的过程记录一下,希望可以帮到需要 ...
- http及浏览器相关知识点归纳
http是应用层协议,采用请求/响应模型 1.浏览器地址栏输入URL地址后发生了什么? 浏览器判断地址是否是合理的URL地址,是否是http协议请求,如果是则进入下一步 浏览器对此URL进行缓存检查: ...
- 基于Swagger+SpringBoot快速构建javaweb项目
章节导航 SpringBoot&Swagger简介 数据模型和接口定义 项目框架生成 业务逻辑实现 项目源码地址 github项目路径:https://github.com/Vikezhu/s ...
- 转:浅析C++中的this指针
原文出处:http://blog.csdn.net/starlee/article/details/2062586 有下面的一个简单的类: class CNullPointCall { public: ...