Vue过滤器的传参使用及案例

最新推荐文章于 2024-09-05 13:30:00 发布

在云海飞

最新推荐文章于 2024-09-05 13:30:00 发布

阅读量1.2k

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_55784914/article/details/128461882

版权

本文详细介绍了Vue过滤器的使用位置、方法和定义语法，特别是如何实现过滤器传参。通过实例展示了如何在双花括号插值和v-bind表达式中应用过滤器，以及如何定义局部和全局过滤器。最后，用一个具体的例子说明了如何利用过滤器的参数功能进行字符串截取操作。

摘要由CSDN通过智能技术生成

Vue过滤器的传参使用及案例

过滤器用于一些常见的文本格式化
过滤器的第二个参数为可选

使用位置

过滤器可以用在两个地方：双花括号插值{{ }}和 v-bind 表达式**

使用方法

{{ 变量 | 过滤器名 }}
{{ 变量 | 过滤器 | 另一个过滤器 }} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值
示例：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

定义语法

局部过滤器
示例：

  <div id="app">
    <div>{{ msg | setStr }}</div>
  </div>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          msg: "效果实现了!!!"
        }
      },
      filters: {
        // 实现效果：替换文本
        setStr: function (value) {
          // 这里写一些逻辑处理并返回
          return value.replace("!!!", "")
        }
      }
    })
  </script>

全局过滤器
注意：局部是filters : { }，全局是 filter
示例：

  <script>
    Vue.filter("setStr", function (value) {
      // 这里写一些逻辑处理并返回
      return value.replace("!!!", "")
    })
    new Vue({}）
  </script>

过滤器实现传参

目的：截取字符串
注解：这里的 format = 4 为ES6语法，为参数赋默认值
substring() 方法返回的子串包括开始处的字符，但不包括结束处的字符。
示例：

  <div id="app">
    <div>{{msg}}</div> <!-- 原始值 abcdefgh-->
    <div>{{msg | setStr}}</div> <!-- 这里的值为 efgh -->
    <div>{{msg | setStr(1)}}</div> <!-- 这里的值为 bcdefgh-->
  </div>
  <script>
    // 全局
    Vue.filter("setStr", (data, format = 4) => {
      return data.substring(format)
    })
    new Vue({
      el: "#app",
      data() {
        return {
          msg: "abcdefgh"
        }
      },
      // 局部
      // filters: {
      //   setStr(data, format = 4) {
      //     return data.substring(format)
      //   }
      // }
    })
  </script>

总结

过滤器也可通过methods或计算属性实现，使用过滤器有时会更加方便

过滤器:
	定义:对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理)。
	语法:
		1.注册过滤器: Vue.filter(name,callback)或new Vue{filters:{}}
		2.使用过滤器:{{ xxx | 过滤器名}}或v-bind:属性 =“xxx │ 过滤器名"
	备注:
		1.过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原本的数据,是产生新的对应的数据