您现在的位置是：首页 > 技术教程 正文

Vue3 之 过滤器

admin 阅读： 2024-04-01
后台-插件-广告管理-内容页头部广告（手机）

1、过滤器简介

1.1、全局过滤器与局部过滤器

过滤器本质上是一个函数，与自定义指令类似。

        全局过滤器

Vue.filter(id, [definition])

     局部过滤器

  1. new Vue({
  2. el: '#app',
  3. filters: {
  4. definition(value): {
  5. ...
  6. }
  7. }
  8. })

案例：将字符串首字母转换为大写字母的全局过滤器

  1. Vue.filter('capitalize', function (value) {
  2. if (!value) return '';
  3. value = value.toString();
  4. return value.charAt(0).toUpperCase() + value.slice(1);
  5. })

 如果换成局部过滤器

  1. let vm = new Vue({
  2. el: '#app',
  3. data: { // 参数定义，字典形式
  4. },
  5. computed: { // 计算属性，多次调用，只计算一次
  6. },
  7. methods: { // 普通方法，多次调用，多次计算
  8. },
  9. filters: { // 过滤器
  10. capitalize(value) {
  11. if (!value) return '';
  12. value = value.toString();
  13. return value.charAt(0).toUpperCase() + value.slice(1);
  14. }
  15. }
  16. })

 

注意：

  1. 当全局过滤器和局部过滤器重名，会采用局部过滤器
  2. 与自定义命令一样，全局过滤器可以在任何 Vue 实例的模板中使用，而局部过滤器只能在该实例绑定的视图中使用

 

过滤器可以使用在两个地方：

    双花括号：{{ 变量 | 过滤器 }}
    v-bind 表达式：v-bind:href=“变量 | 过滤器”

2、过滤器的参数

过滤器函数总是接收表达式的值作为第一个参数，过滤器本质上是一个 JS 函数，自然可以接收多个参数。

    不建议把过滤器功能做的很复杂，这违背了过滤器的设计初衷,比如：Vue.filter(‘format’, function (value, …params) {…})

实例：为表达式的值添加前后缀的过滤器
 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  8. <body>
  9. <div id="app">
  10. <h2>过滤器</h2>
  11. <!-- 输出：vue-filters.js -->
  12. <p>{{ filename | format('vue', suffix) }}</p>
  13. </div>
  15. <script src="VueJs/vue.js"></script>
  16. <script>
  17. Vue.filter('format', function (value, prefix, suffix) {
  18. if (!value) return '';
  19. value = value.toString();
  20. return prefix + "-" + value + "." + suffix;
  21. })
  22. let vm = new Vue({
  23. el: '#app',
  24. data: {
  25. filename: 'filters',
  26. suffix: 'js'
  27. },
  28. computed: { // 计算属性，多次调用，只计算一次
  29. },
  30. methods: { // 普通方法，多次调用，多次计算
  31. },
  32. filters: { // 过滤器
  33. }
  34. })
  35. </script>
  36. </body>
  37. </html>

 3、过滤器的串联

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .profile {}
  8. </style>
  9. </head>
  11. <body>
  12. <div id="app">
  13. <h2>过滤器</h2>
  14. <!-- 输出结果：DLROW OLLEH -->
  15. <p>{{ message | uppercase | reverse }}</p>
  16. </div>
  18. <script src="VueJs/vue.js"></script>
  19. <script>
  20. Vue.filter('uppercase', function (value) {
  21. if (!value) return '';
  22. value = value.toString();
  23. return value.toUpperCase();
  24. })
  26. Vue.filter('reverse', function (value) {
  27. if (!value) return '';
  28. value = value.toString();
  29. return value.split('').reverse().join('');
  30. })
  32. let vm = new Vue({
  33. el: '#app',
  34. data: {
  35. message: 'hello world'
  36. },
  37. computed: { // 计算属性，多次调用，只计算一次
  38. },
  39. methods: { // 普通方法，多次调用，多次计算
  40. },
  41. filters: { // 局部过滤器
  42. }
  43. })
  44. </script>
  45. </body>
  46. </html>

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表