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 ...
随机推荐
- GetOpenFilename的基本用法(文件夹实操)
Sub 数据导入()Dim f, arr, i&, j&, k, m%, n%, p%, sh As Workbookf = Application.GetOpenFilename(f ...
- Vultr IP被墙该怎么办
我们创建好Vultr服务器时候,首先需要检测IP地址是否可用,很多IP在国内被墙,导致使用Xshell连接不上,虽然IP能够ping通,但是SSH依然连接不上.那Vultr IP被墙该怎么办呢? 方法 ...
- leetcode-210-课程表②
题目描述: 第一次提交: class Solution: def findOrder(self, numCourses: int, prerequisites: List[List[int]]) -& ...
- 【JZOJ6346】ZYB和售货机
description analysis 其实这个连出来的东西叫基环内向树 先考虑很多森林的情况,也就是树根连回自己 明显树根物品是可以被取完的,那么买树根的价钱要是儿子中价钱最小的那个 或者把那个叫 ...
- H5页面在手机上查看 使用手机浏览自己的web项目
参考:http://www.browsersync.cn/#install 首先全局安装BrowserSync : npm install -g browser-sync 其次在项目文件夹下运行: b ...
- day 1 预习
day1 显卡:全称是显示接口卡,又称显示适配器,是电脑进行数模信号转换设备,承担输出显示图形的任务,显卡接在电脑主板上它将电脑的数字信号转换成模拟信号,让显示器显示出来.同时显卡还有图像处理能力,可 ...
- 2018-8-10-win10-uwp-打开文件管理器选择文件
title author date CreateTime categories win10 uwp 打开文件管理器选择文件 lindexi 2018-08-10 19:16:50 +0800 2018 ...
- 笔记:Python操作sql
python操作mysql步骤: 创建connect连接 conn = connect(host='127.0.0.1', port=3306, user='root', password='1234 ...
- 3.pycharm spark配置
pycharm 内的环境变量配置 选择相应的spark程序文件的对应的配置信息 PYSPARK_PYTHON:python的安装路径 PYTHONPATH:spark安 ...
- Spring_数据校验和自定义检验规则和分组校验
@Validated :绑定需要校验的数据. 数据校验规则:为数据绑定校验的规则 private Long booId;@NotNull(message = "不能为空")pri ...