Vue过滤器-filter

最新推荐文章于 2023-12-14 20:08:35 发布

辣条小哥哥

最新推荐文章于 2023-12-14 20:08:35 发布

阅读量244

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44090040/article/details/107340098

版权

vue 专栏收录该内容

77 篇文章 1 订阅

订阅专栏

1. 局部定义过滤器

在这里插入图片描述

<!--
 * @Descripttion: vue过滤器-filter
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-03 09:10:28
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-07-14 14:13:56
--> 

<template>
  <div class="container">
    <p>原数据:{{message}}</p>
    <p>反转后的数据:{{message | reverseMessage}}</p>
    <p>转换成大写后的数据:{{message | toUpperCase}}</p>
    <p>过滤器串联后的数据:{{message | toUpperCase | reverseMessage}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "abcdefg"
    };
  },
  filters: {
    reverseMessage: function(value) {
      return value
        .split("")
        .reverse()
        .join("");
    },
    toUpperCase: function(value) {
      return value.toUpperCase();
    }
  }
};
</script>

<style  scoped lang="less">
</style>

2. 全局定义过滤器
在main.js中定义全局过滤器

Vue.filter('addNamePrefix', (value) => {
	return 'my name is' + value;
});

在这里插入图片描述

<!--
 * @Descripttion: vue过滤器-filter
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-03 09:10:28
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-07-14 16:05:46
--> 

<template>
  <div class="container">
    <p>原数据:{{message}}</p>
    <p>反转后的数据:{{message | reverseMessage}}</p>
    <p>转换成大写后的数据:{{message | toUpperCase}}</p>
    <p>过滤器串联后的数据:{{message | toUpperCase | reverseMessage}}</p>
    <p>使用全局过滤器后的数据:{{message | addNamePrefix}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "abcdefg"
    };
  },
  filters: {
    reverseMessage: function(value) {
      return value
        .split("")
        .reverse()
        .join("");
    },
    toUpperCase: function(value) {
      return value.toUpperCase();
    }
  }
};
</script>

<style  scoped lang="less">
</style>

3. 计算属性筛选，methods方法筛选
在这里插入图片描述

<!--
 * @Descripttion: vue过滤器-filter
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-03 09:10:28
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-07-14 16:17:27
--> 

<template>
  <div class="container">
    <p>原数据:{{message}}</p>
    <p>反转后的数据:{{message | reverseMessage}}</p>
    <p>转换成大写后的数据:{{message | toUpperCase}}</p>
    <p>过滤器串联后的数据:{{message | toUpperCase | reverseMessage}}</p>
    <p>使用全局过滤器后的数据:{{message | addNamePrefix}}</p>
    <p>使用全局过滤器后的数据:{{arr}}</p>
    <p>在computed中使用后的数据:{{changeArr}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "abcdefg",
      arr: [1, 2, 3, 4, 5, 6]
    };
  },
  filters: {
    reverseMessage: function(value) {
      return value
        .split("")
        .reverse()
        .join("");
    },
    toUpperCase: function(value) {
      return value.toUpperCase();
    }
  },
  computed: {
    changeArr: function() {
      const vm = this;
      let arrList = vm.arr;
      return arrList.filter(function(item) {
        return item % 2 == 0;
      });
    }
  }
};
</script>

<style  scoped lang="less">
</style>