【Vue2】Filter 过滤器

 

过滤器案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
  <!-- 
    过滤器(Filters) 是vue为开发者提供的功能，常用于文本的格式化。
    过滤器可以用在两个地方:插值表达式和v-bind属性绑定。
    过滤器应该被添加在JavaScript表达式的尾部,由“管道符”进行调用,示例代码如下:

    vue filters中 this指向的不是vue实例，但想要获取vue实例中data中的数据，
    可以采用下面方法。在 beforeCreate的钩子函数中将vue实例赋值给全局变量_self，
    然后filters中即可通过_self获取data中数据

    过滤器的注意点
    1.要定义到filters 节点下，本质是一个函数
    2.在过滤器函数中，-定要有return值
   -->
  <!--在双花括号中通过“管道符"调用capitalize 过滤器，对message的值进行格式化--> 
  <p>{{ message | capitalize }}</p>
  <!--在v-bind中通过“管道符"调用formatId 过滤器，对rawId的进行格式化-->
  <div v-bind:id="rawId | formatld"></div>
</div>
<script>
const VIEW_MODEL = new Vue({
  el: '#app', // 控制的元素实例，
  data: {
    message: '1003',
    rawId: 1001,
    list: [
      { id: '1001', name: '类型1'},
      { id: '1002', name: '类型2'},
      { id: '1003', name: '类型3'},
      { id: '1004', name: '类型4'},
      { id: '1005', name: '类型5'},
      { id: '1006', name: '类型6'},
    ],
    list2: [
      { id: 1001, name: '主键1'},
      { id: 1002, name: '主键2'},
      { id: 1003, name: '主键3'},
      { id: 1004, name: '主键4'},
      { id: 1005, name: '主键5'},
      { id: 1006, name: '主键6'},
    ]
  },
  beforeCreate() {
    // 使用钩子函数把vue实例赋值给_self变量
    _self = this 
  },
  filters: {
    capitalize(val) {
      // 过滤器方法一定要有返回值, 入参就是管道符前面的变量
      const content = '无类型'
      if (!val) return content
      
      // 注意访问data属性的值时无法使用this获取，通过钩子函数赋值的变量访问
      // https://blog.csdn.net/to_the_Future/article/details/122083980
      const type = _self.list.find(x => x.id === val)
      if (!type) return content
      return type.name
    },
    formatld(val) {
      const content = '无主键'
      if (!val) return content

      const type = _self.list2.find(x => x.id === val)
      if (!type) return content
      return type.name
    }
  }
})
</script>
</body>
</html>

　

全局过滤器和实例过滤器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./../lib/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.6.0/dayjs.min.js"></script>
</head>
<body>
<!-- 
  创建全局过滤器，对每一个Vue实例都可以处理
    Vue.filter('过滤器名称', val => {
      if (!val) return ''
      const type = list.find(x => x.id === val)
      if (!type) return ''
      return type.name
    })
  如果局部过滤器和全局过滤器一样名字，则调用局部过滤器
  Vue支持连续过滤器
  类似linux的管道符，第一个过滤器完成后交给后面的过滤器继续执行
  {{item.time | filterFunctionA | filterFunctionB | ... }}

  过滤器参数传递问题
  1、首个参数一定是管道符传递过来的参数，后面的入参才是自定义的
  {{item.time | filterFunction(val1, val2, ...) }}
  
  filters: {
    filterFunction(arg1, arg2, ...) {
    }
  }
 -->
<div id="app">
  <p>{{ message | capitalize }}</p>
  <p>{{ createTime | dateFormat }}</p>
</div>

<div id="app2">
  <p>{{ message | capitalize }}</p>
</div>
<script>
// dayJS资源引入
// const DAYJS = require('dayjs')

const list = [
  { id: '1001', name: '全局类型1'},
  { id: '1002', name: '全局类型2'},
  { id: '1003', name: '全局类型3'},
  { id: '1004', name: '全局类型4'},
  { id: '1005', name: '全局类型5'},
  { id: '1006', name: '全局类型6'}
]

Vue.filter('capitalize', val => {
  if (!val) return ''
  const type = list.find(x => x.id === val)
  if (!type) return ''
  return type.name
})
// 全局的时间过滤器
Vue.filter('dateFormat', val => {
  // 可以安装MomentJS处理
  // DAYJS处理
  const dateString = dayjs(val).format('YYYY-MM-DD')
  console.log(dateString)
  return dateString
})

const VIEW_MODEL1 = new Vue({
  el: '#app',
  data: {
    message: '1003',
    createTime: new Date(),
    list: [
      { id: '1001', name: '局部类型1'},
      { id: '1002', name: '局部类型2'},
      { id: '1003', name: '局部类型3'},
      { id: '1004', name: '局部类型4'},
      { id: '1005', name: '局部类型5'},
      { id: '1006', name: '局部类型6'},
    ],
  },
  beforeCreate() {
    // 使用钩子函数把vue实例赋值给_self变量
    _self = this 
  },
  filters: {
    capitalize(val) {
      // 过滤器方法一定要有返回值, 入参就是管道符前面的变量
      const content = '无类型'
      if (!val) return content
      
      // 注意访问data属性的值时无法使用this获取，通过钩子函数赋值的变量访问
      // https://blog.csdn.net/to_the_Future/article/details/122083980
      const type = _self.list.find(x => x.id === val)
      if (!type) return content
      return type.name
    },
  }
})

const VIEW_MODEL2 = new Vue({
  el: '#app2', 
  data: {
    message: '1005',
  }
})
</script>
</body>
</html>

　　

 

posted @ 2022-05-07 09:46  emdzz  阅读(737)  评论(0)    收藏  举报