Vue中的Vue中的过滤器filter

https://blog.csdn.net/m0_64969829/article/details/122926823

前言

一、filter过滤器是什么？

过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。

 

二、过滤器分为什么?

过滤器分为全局过滤器和局部过滤器

 

1.全局过滤器

全局过滤器是通过Vue.filter()来定义的，定义好后，它在所有组件中都可以使用。

// global-filter是过滤器名称
// 函数第一个参数是需要过滤的数据.
// 函数第二个参数是给过滤器传递的值.
  Vue.filter('global-filter',(val,...args)=>{
    console.log(`需要过滤的数据是:${val}`)
    return val + ' 过滤器追加的数据'
  })

2.局部过滤器

局部过滤器,定义在组件内部 filters 属性上.它只能在此组件内部使用.

 var app = new Vue({
    el: '#app',
    data: {
      price:null,
      oldValue: '原始数据'
    },
    methods: {},
    // 定义组件过滤器
    filters: {
      priceFmt(val,location) {
        switch(location) {
          case 'usa':
            return '$' + val
            break
          default:
          return val
        }
      }
    })

注意：全局注册时是filter，没有s的。而组件过滤器是filters，是有s的，这要注意了，虽然你写的时候没有s不报错，但是过滤器是没有效果的

 

三、过滤器的使用方式?

过滤器的使用方式是，在双花括号或v-bind中通过一个管道符来拼接,

 

四、过滤器的应用场景?

项目中使用过滤器：时间，价钱

————————————————

 

效果案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
                {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
            </li>
        </ul>
    </div>
      <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>

        Vue.filter("gFilter", function (val) {
            if (val == 1) {
                return "男~~~";
            } else {
                return "女~~~";
            }
        })

        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            filters: {
                //// filters 定义局部过滤器，只可以在当前vue实例中使用
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })
    </script>
</body>

</html>

运行效果：

 

 

 

前言一、filter过滤器是什么？过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
二、过滤器分为什么?过滤器分为全局过滤器和局部过滤器
1.全局过滤器全局过滤器是通过Vue.filter()来定义的，定义好后，它在所有组件中都可以使用。
// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值.  Vue.filter('global-filter',(val,...args)=>{    console.log(`需要过滤的数据是:${val}`)    return val + ' 过滤器追加的数据'  })12345672.局部过滤器局部过滤器,定义在组件内部 filters 属性上.它只能在此组件内部使用.
 var app = new Vue({    el: '#app',    data: {      price:null,      oldValue: '原始数据'    },    methods: {},    // 定义组件过滤器    filters: {      priceFmt(val,location) {        switch(location) {          case 'usa':            return '$' + val            break          default:          return val        }      }    })12345678910111213141516171819注意：全局注册时是filter，没有s的。而组件过滤器是filters，是有s的，这要注意了，虽然你写的时候没有s不报错，但是过滤器是没有效果的
三、过滤器的使用方式?过滤器的使用方式是，在双花括号或v-bind中通过一个管道符来拼接,
四、过滤器的应用场景?项目中使用过滤器：时间，价钱————————————————版权声明：本文为CSDN博主「@柠稔」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/m0_64969829/article/details/122926823

posted on 2022-07-05 08:45  luzhouxiaoshuai  阅读(609)  评论(0)  编辑  收藏  举报

导航