zoukankan      html  css  js  c++  java
  • vue之过滤器

    一、什么是过滤器?

      过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。

    二、过滤器的使用

    1、定义过滤器

    • 全局过滤器
    Vue.filter('过滤器名称', function (value1[,value2,...] ) {  

    //逻辑代码

    })
    • 局部过滤器
    new Vue({       
     filters: {      
        '过滤器名称': function (value1[,value2,...] ) { 
           // 逻辑代码     
          } 
             }    
      })    

    2、过滤器使用的地方

        双花括号插值
        v-bind表达式
    过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示
    <!-- 在双花括号中 -->
    <div>{{数据属性名称 | 过滤器名称}}</div>
    <div>{{数据属性名称 | 过滤器名称(参数值)}}</div>
    <!-- 在 `v-bind` 中 -->
    <div v-bind:id="数据属性名称 | 过滤器名称"></div>
    <div v-bind:id="数据属性名称 | 过滤器名称(参数值)"></div>

    三、实例

    1、传递一个参数的全局过滤器

    <div id="app">
        <span>{{msg|capitalize}}</span>//data中声明msg:'hello'
    </div>
     
     //全局过滤器,将信息转成大写
      Vue.filter('capitalize', function (value) {
        //value左边那个属性值
        return value.toUpperCase()
    
      })

    2、传递多个参数的局部过滤器

    <div id="app">
    
        <!--过滤器接收多个参数-->
        <span>{{value1|multiple(value2,value3)}}</span>
    
    </div>
    <script>
    
      var vm = new Vue(
        {
          el: '#app',
          data: {
            msg: 'hello',
            value1:10,
            value2:20,
            value3:30
          },
        //局部过滤器
          filters: {
            'multiple': function (value1, value2, value3) {
              return value1*value2*value3
            }
          }
    
        }
      )
    
    </script>
  • 相关阅读:
    ZooKeeper基本原理
    ElasticSearch的基本原理与用法
    Solr与MySQL查询性能对比
    MySQL性能优化总结
    Java并发集合及线程池实现原理
    Java垃圾回收机制
    Java Spring的IoC和AOP的知识点速记
    基于Solr的空间搜索
    系统学习消息队列分享(十) 如何实现高性能的异步网络传输?
    系统学习消息队列分享(九) 如何使用异步设计提升系统性能?
  • 原文地址:https://www.cnblogs.com/shenjianping/p/11330126.html
Copyright © 2011-2022 走看看