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 ...
随机推荐
- C 二维数组与指针
http://c.biancheng.net/view/2022.html 1. 区分指针数组和数组指针 指针数组:存放指针的数组,如 int *pstr[5] = NULL; 数组中每个元素存放的是 ...
- override new 的区别
override : 方法提供从基类继承的成员的新实现. 通过 override 声明重写的方法称为重写基方法. 重写基方法必须具有与 override方法相同的签名 new : 关键字可以显式隐藏从 ...
- PHP算法之字符串转换整数 (atoi)
请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负号时,则将该符号与之 ...
- CSIC_716_20191108【文件的操作,以及彻底解决编码问题的方案】
关于编码的问题: 在平时编写代码,涉及到打开文件时,常常遇到字符编码的报错, 通过总结,得出以下规律 如果在操作过程中涉及到调用文本文档,一定要在文本文档开头申明编码方式(# coding:XXXX ...
- CF822F Madness
题意:给你一棵边权都为1的树,要求选择互不相交的若干条路径,这些路径包含有所有点. 在每一条路径上选择一条边,放置一个动点,设置一个方向,它开始在该路径上来回运动,速度为1.每个点上都有一个停表,当有 ...
- Java int和Integer包装类的区别和比较
区别: ...
- php数组的快速排序
function quick($array){ if(count($array)<=1){ return $array; } $key=$array[0]; $right=array(); $l ...
- 校园商铺-1开发准备-3 Eclipse与maven的联合配置
1. JDK安装地址: 2.maven安装地址: 3.maven配置 注意:settings.xml文件极容易出现格式错误 4.tomcat修改端口 我本地启动了其他服务,占用了8080端口,因此需要 ...
- Photoshop基本操作
PS 工具是我们使用频率比较高的软件之一, 我们学习PS目的不是为了设计海报做电商和UI的,而是要求: 会简单的抠图 会简单的修改PSD效果图 熟练的切图 能和网站美工美眉有共同话题..... Pho ...
- Javascript加载talbe(包含分页、数据下载功能)
效果图如下: 首先简单说明一下,后面会给所涉及到的代码都贴上来的. 1.excel图标是一个用户控件,用来触发下载 2.首页.上页......每页多少条,这一块是一个整体,你可以选择放置在表格下面,或 ...