vue 项目中自定义过滤器全局使用 filter

新建filter文件
src目录下新建filters目录，filters目录里新建index.js文件

exports.formatMoney = (value) => {if (value) {value = Number(value);return '￥ ' + value.toFixed(2);}
};exports.statusName = (val) => {let statusName = '';switch (val) {case 0: {statusName = '已取消';break;}case 10: {statusName = '未付款';break;}case 20: {statusName = '已付款';break;}}return statusName;
};

main.js里注册filter

import filters from './filters';
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));注册filter后main如下import Vue from 'vue'
import App from './App'
import router from './router'
import Mixin from './mixins';
import filters from './filters';
Vue.mixin(Mixin);Vue.config.productionTip = false
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

使用

<template><div><p>这是index页面</p><p @click="loadPage('Index')">Index</p><p @click="loadPage('About')">About</p><p @click="loadPage('Product')">Product</p><div>价格：{{price|formatMoney}}</div><div>订单状态：{{orderStatus | statusName}}</div></div>
</template>
<script>export default{data(){return{price:95,orderStatus:10}}}
</script>
<style></style>

页面展示结果
这是index页面
Index
About
Product

价格：￥ 95.00
订单状态：未付款

vue 项目中自定义过滤器全局使用 filter相关推荐

js定义全局变量 vue页面_在vue项目中实现定义全局变量全局函数操作
写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一 ...
vue项目中自定义icon图标
vue项目中有时需要用到自定义图标,用法如下新建icon.css文件,定义图标及其名称 /*指针图标*/ .icon-pointer {background: url('../assets/imag ...
在vue项目中引入vuex(全局状态管理器)
目录 Vuex是什么? State Getter Mutation Action Module 项目结构 Vuex是什么? Vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式存储管 ...
methods vue过滤器和_数据动态过滤技巧在 Vue 项目中的实践
这个问题是在下在做一个 Vue 项目中遇到的实际场景,这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -.-),过程中会涉及到一些Vue源码的概念比如 $mount. rende ...
Vue项目中的自定义指令
Vue项目中的自定义指令使用场景:需要对DOM元素进行底层操作局部自定义指令当指令第一次被绑定到元素上的时候,会立即触发 bind() 1 定义与 data 同级在 directives 节 ...
java项目配置过滤器_在JavaWeb项目中如何正确的使用Filter过滤器
在JavaWeb项目中如何正确的使用Filter过滤器发布时间:2020-11-11 17:12:00 来源:亿速云阅读:79 作者:Leah 这期内容当中小编将会给大家带来有关在JavaWeb项 ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...

vue 项目中自定义过滤器全局使用 filter

vue 项目中自定义过滤器全局使用 filter相关推荐

最新文章

热门文章

vue 项目中 自定义过滤器 全局使用 filter

vue 项目中 自定义过滤器 全局使用 filter相关推荐

最新文章

热门文章

vue 项目中自定义过滤器全局使用 filter

vue 项目中自定义过滤器全局使用 filter相关推荐