Vue中filter函数过滤器的使用

filters是什么？

filters顾名思义是一个过滤器，就是对数据进行过滤筛选，将数据转化为我们想要的格式，但是他不会改变原始数据。

filters分为两类

一：局部过滤器

局部过滤器的特点：只能作用于本组件没内

定义局部过滤器：在本组件内直接定义即可（代码如下：）

<script>export default {// 定义局部过滤器// filtersMoney ===> 定义局部过滤器的函数名(可自定义)// val ===> 我们要修改/转化的数据filters: {filtersMoney(val){return "￥"+val.toFixed(2)}},}

定义完之后直接通过管道符 | 调用即可（代码如下：）

<div> {{price | filtersMoney}} </div><!-- 管道符 前面的 price ===> 我们要修改/转化的数据 --> <!-- 管道符 后面的 filtersMoney ===> 我们定义的局部过滤函数 -->

二：全局过滤器

全局过滤器的特点：可以作用于全部组件中

定义全局过滤器：在main.js 文件里面进行定义（代码如下：）

import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = false// 定义全局过滤器// filterMoney ===> 定义全局过滤器的函数名(可自定义)// val ===> 我们要修改/转化的数据Vue.filter('filterMoney', function(val) {return "￥" + (val * 1).toFixed(2);
})new Vue({router,render: h => h(App)
}).$mount('#app')

定义完之后直接在需要的文件里面通过管道符 | 进行调用即可（代码如下：）

<div> {{price | filterMoney}} </div><!-- 管道符 前面的 price ===> 我们要修改/转化的数据 --><!-- 管道符 后面的 filterMoney ===> 我们定义的全局过滤函数 -->

特别注意
一：定义局部过滤器使用 filters 属性该属性是一个对象，可以在其中定义多个过滤器函数

二：定义全局过滤器使用 filter 属性当然在 main.js 文件中可以定义多个全局过滤器函数

三：当局部过滤器和全局过滤器的函数名相同时此时调用的过滤器将是局部过滤器函数

四：当出现父子组件时，父组件和全局中分别定义了相同名称的过滤器，此时子组件中调用的过滤器将是全局过滤器函数

（建议：定义局部过滤器和全局过滤器时函数名尽量区别开来，减少不必要的麻烦）

Vue中filter函数过滤器的使用相关推荐

matlab的filter函数,filter函数用法 matlab中filter函数的用法
matlab中filter函数的用法如果你深爱的人此刻在你身边陪你,你怎么会有时间来看这些文字呢离散系统的差分方程为 2y[k]-y[-1]-3y[k-2]=2x[k]-x[k-1] x[k]=(0 ...
vue中在一个函数中调用另外一个函数
vue中在一个函数中调用另外一个函数 this.$options.methods.函数名.bind(this)();
vue 中格式化时间过滤器格式化时间
vue 中格式化时间过滤器格式化时间 data.js 格式化方法使用 * // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s) ...
VUE中函数调用函数
VUE中函数调用函数 VUE中函数调用函数 VUE中函数调用函数有时候,需要在一个函数中,调用另外一个函数,采用这种方法 this.$options.methods.onQuery('queryFo ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
vue中mapGetters函数前面的三个点是什么意思？
今天视频面试时,被问到了,vue中mapState和mapGetter函数前面的三个点是什么意思? 今天看到了对这个问题的解答: mapState 函数返回的是一个对象.我们如何将它与局部计算属性混合 ...
Vue中渲染函数（render）的介绍和应用
1. render函数的介绍简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM. 因为vue是虚拟DOM,所以在拿到template模板时也要 ...
python中filter函数的用法
描述 filter() 函数用于过滤序列,过滤掉不符合条件的元素,返回一个迭代器对象,如果要转换为列表,可以使用 list() 来转换. 该接收两个参数,第一个为函数,第二个为序列,序列的每个元素作为 ...
html中filter函数的用法,filter函数怎么使用
JavaScript中的arr.filter()函数用于从给定数组创建一个新数组,该数组仅包含给定数组中满足参数函数设置条件的那些元素.下面我们就来具体看一下filter()的使用方法. filter ...

Vue中filter函数过滤器的使用

filters是什么？

filters分为两类

一：局部过滤器

二：全局过滤器

Vue中filter函数过滤器的使用相关推荐

最新文章

热门文章

Vue中filter函数 过滤器的使用

filters是什么？

filters分为两类

一：局部过滤器

二：全局过滤器

Vue中filter函数 过滤器的使用相关推荐

最新文章

热门文章

Vue中filter函数过滤器的使用

Vue中filter函数过滤器的使用相关推荐