Vue----过滤器(Vue3弃用)

简介: Vue----过滤器(Vue3弃用)

4 过滤器(Vue3弃用)

过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化。例如:hello -> Hello

过滤器可以用在两个地方:插值表达式和 v-bind 属性绑定。

过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符”进行调用

4.1 过滤器的定义

在创建 vue 实例期间,可以在 filters 节点中定义过滤器。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p :title="info | capitalize">{{message | capitalize}}</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          message: 'hello vue.js',
          info: 'title info',
        },
        filters: {
          capitalize(str) {
            return str.charAt(0).toUpperCase() + str.slice(1)
          }
        }
      })
    </script>
  </body>
</html>

4.2 私有过滤器和全局过滤器

在 filters 节点下定义的过滤器,称为“私有过滤器”,因为它只能在当前 vm 实例所控制的 el 区域内使用。

如果希望在多个 vue 实例之间共享过滤器,则可以按照如下的格式定义全局过滤器。

<script>
      // 全局过滤器
      Vue.filter('capitalize', (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1) + '~~~'
      })
    </script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p :title="info | capitalize">{{message | capitalize}}</p>
    </div>
    <div id="app2">
      <p>{{abc | capitalize}}</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      // 全局过滤器
      //全局过滤器–独立于每个vm实例之外
      // Vue.filter()方法接收两个参数:
      //第1个参数,是全局过滤器的"名字“
      //第2个参数,是全局过滤器的"处理函数“
      Vue.filter('capitalize', (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1) + '~~~'
      })
    </script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          message: 'hello vue.js',
          info: 'title info',
        },
        // 私有过滤器,只能被当前 vm 所控制的区域所使用
        filters: {
          capitalize(str) {
            return str.charAt(0).toUpperCase() + str.slice(1)
          },
        },
      })
    </script>
    <script>
      const vm2 = new Vue({
        el: '#app2',
        data: {
          abc: 'abc'
        }
      })
    </script>
  </body>
</html>

4.3 连续调用多个过滤器

过滤器可以串联地进行调用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 把message 的值,交给filterA 进行处理-->
    <!-- 把 filterA处理的结果,再交给filterB进行处理-->
    <!--最终把 filterB处理的结果,作为最终的值渲染到页面上,-->
      <p :title="info | capitalize">{{message | capitalize | maxLength}}</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      // 全局过滤器
      // 首字母转大写的过滤器
      Vue.filter('capitalize', (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1)
      })
      // 定义控制文本长度的过滤器
      Vue.filter('maxLength', (str) => {
        if(str.length <= 10) return str
        return str.slice(0, 10) + '...'
      })
    </script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          message: 'hello vue.js',
          info: 'title info',
        },
      })
    </script>
  </body>
</html>

4.4 过滤器传参

过滤器的本质是 JavaScript 函数,因此可以接收参数。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p :title="info | capitalize">{{message | capitalize | maxLength(3)}}</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      // 全局过滤器
      // 首字母转大写的过滤器
      Vue.filter('capitalize', (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1)
      })
        // 定义控制文本长度的过滤器
        // 过滤器处理函数的形参列表中:
    // 第一个参数:永远都是"管道符“前面待处理的值
    // 从第二个参数开始,才是调用过滤器时传递过来的arg1 和arg2参数
      Vue.filter('maxLength', (str, len = 10) => {
        if(str.length <= len) return str
        return str.slice(0, len) + '...'
      })
    </script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          message: 'hello vue.js',
          info: 'title info',
        },
      })
    </script>
  </body>
</html>

4.6过滤器的兼容性

过滤器仅在 vue 2.x 和 1.x 中受支持,在 vue 3.x 的版本中剔除了过滤器相关的功能。

在企业级项目开发中:

如果使用的是 2.x 版本的 vue,则依然可以使用过滤器相关的功能

如果项目已经升级到了 3.x 版本的 vue,官方建议使用计算属性或方法代替被剔除的过滤器功能

具体的迁移指南,请参考 vue 3.x 的官方文档给出的说明:


相关文章
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
26天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
128 64
|
26天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
108 60
|
5天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
1天前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
12 3
|
26天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
30 8
|
25天前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
28 1
|
25天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
35 1
|
26天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
JavaScript 前端开发
重读vue电商网站41之自定义格式化时间的全局过滤器
重读vue电商网站41之自定义格式化时间的全局过滤器
116 0
重读vue电商网站41之自定义格式化时间的全局过滤器