Vue中filter函数 过滤器的使用_vue filter过滤器用法

目录

filters是什么？

filters分为两类

一：局部过滤器

二：全局过滤器

特别注意

---

filters是什么？

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

---

filters分为两类

一：局部过滤器

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

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

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

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

<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 文件中可以定义多个全局过滤器函数

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

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

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

---

此案例是 转化价钱格式 例如： 将 90.2 / 1  格式 转化为 ￥90.20  / ￥1.00 格式