Vue学习——过滤器

最新推荐文章于 2024-08-02 15:55:58 发布

王猪精也

最新推荐文章于 2024-08-02 15:55:58 发布

阅读量98

点赞数

分类专栏： Vue学习笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44734398/article/details/121749020

版权

Vue学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

过滤器

定义

对要显示的数据进行特定格式化后再显示（适用于处理一些简单的逻辑）。

语法

注册过滤器

 Vue.filter(name,callback) -->全局过滤器
 或 
 new Vue({ filters:{} }) -->局部过滤器

使用过滤器

 {{ xxx | 过滤器名  }}
 或
 v-bind:attr=" xxx | 过滤器名 "

备注

1. 过滤器默认接收的第一个参数，是过滤的对象
2. 过滤器也可以接收额外参数
3. 过滤器可以串联
4. 过滤器并不改变原本的数据，是生成对应的新数据

<body>
  <div id="root">
    <h1>我是root1</h1>
    
    <!-- 使用局部过滤器 -->
    <h1> {{info | upper }} </h1>
    <!-- 使用全局过滤器 -->
    <h1> {{info | mySlice(6) }} </h1>
    <!-- 串联使用过滤器 -->
    <h1> {{info | upper | mySlice(6) }} </h1>
  </div>

  <div id="root2">
    <hr>
    <h1>我是root2</h1>
    <!-- 使用全局过滤器 -->
    <h1> {{info2 | mySlice(5) }} </h1>
  </div>

  <script>
    Vue.config.productionTip = false
	// 注册带一个参数的全局过滤器，
    Vue.filter('mySlice',function(val,num){
      return val.slice(0,num)
    })

    const vm = new Vue({
      el:'#root',
      data: {
        info: 'hello，hello'
      },
      // 注册局部过滤器
      filters:{
        upper(val){
          return val.toUpperCase()
        }
      }
    })

    const vm2 = new Vue({
      el: '#root2',
      data: {
        info2: 'hi hi hi'
      }
    })
  </script>
</body>