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>
  • 相关阅读:
    刨析js代码执行机制
    H5离线缓存基础系列
    meta 详解
    如何成长为一名合格的web架构师?
    整理的互联网公司面试趋势
    http协议
    前端现在到底需要什么样的人才
    webpack 4.0 版本的简单使用
    vue的懒加载如何实现?
    Runtime的几个小例子(含Demo)
  • 原文地址:https://www.cnblogs.com/shenjianping/p/11330126.html
Copyright © 2011-2022 走看看