VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • vue中的过滤器实例代码详解

    建站教程 2019年11月09日 关键词:,,,

    过滤器

    1.过滤器规则

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:

    双花括号插值{{}}和  v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

    <!-- 在双花括号中 -->
    {{ name | Upper }}
    <!-- 在 `v-bind` 中 -->
    <div v-bind:id="martin | Upper"></div>

    过滤器分为全局过滤器和本地过滤器,全局过滤器顾名思义就是所有Vue实例挂载的元素内都能使用,而本地过滤器则是指只有过滤器函数所在的Vue实例挂载的元素内可以使用

    全局过滤器:

    Vue.filter('Upper',function (name) {
        return name.toUpperCase();
    });

    本地过滤器:

     var vm=new Vue({
        el: '#app',
        data: {
          name:'martin'
        },
        filters:{
          Upper:function (name) {
            return name.toUpperCase()
          }
        }
      })

    2.串联过滤器

    {{name | filterA | filterB }}

    解释:

    第一步:先把name 放到 filterA过滤器中进行过滤

    第二步:将第一步过滤器的结果再放到 filterB再进行过滤,显示最终过滤结果

    3.过滤器也可以接收参数,因为过滤器说到底只是一个函数

    {{ name | filterA('arg1', arg2) }}

    解释:

    filterA 在这里应该定义为接收三个参数的过滤器函数。其中 name 的值作为第一个参数,字符串 arg1 作为第二个参数,表达式  arg2  的值作为第三个参数。

    最后送给大家一个实例:

    源代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>  <meta charset="UTF-8">
      <title>Title</title>
      <script src="./bootstrap/js/jquery-1.10.1.js"></script>
      <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
      <script src="./bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div id="app">
      <div class="form-inline">
        <label>id:
          <input type="text" class="form-control" placeholder="请输入你的id" v-model="id">
        </label>
        <label>name:
          <input type="text" class="form-control" placeholder="请输入你的name" v-model="name">
        </label>
        <button class="btn btn-success" @click="add">add</button>
        <label>请输入你的搜索关键字:
          <input type="text" class="form-control" placeholder="请输入你的搜索关键字" v-model="keyword">
        </label>
        <button class="btn btn-success" @click="search(keyword)">search</button>
      </div>
      <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>ctime</th>
          <th>operation</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,i) in search(keyword)" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime|dateFormat}}</td>
          <td>
            <a href="#" class="btn btn-success" @click.prevent="">{{item.operation[0]}}</a>
            <a href="#" class="btn btn-success" @click.prevent="del(i)">{{item.operation[1]}}</a>
          </td>
        </tr>
        </tbody>
      </table>
    
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      Vue.filter('dateFormat',function (date) {
        var dy=date.getFullYear();
        var dm=date.getMonth()+1;
        var dd=date.getDate();
        var dh=date.getHours();
        var dm=date.getMinutes();
        var ds=date.getSeconds();
        return `${dy}-${dm}-${dd} ${dh}:${dm}:${ds}`
      });
      var vm=new Vue({
        el: '#app',
        data: {
          keyword:'',
          id:'',
          name:'',
          list:[{id:1,name:'宝马',ctime:new Date(),operation:['add','delete']},
            {id:2,name:'奔驰',ctime:new Date(),operation:['add','delete']},
            {id:3,name:'大众',ctime:new Date(),operation:['add','delete']}
          ]
        },
        methods:{
          add(){
            var curid=this.id;
            var curname=this.name;
            this.list.push({id:curid,name:curname,ctime:new Date(),operation:['add','delete']});
            this.id='';
            this.name='';
          },
          del(i){
            this.list.splice(i,1);
          },
          search(name){
            var arr=[];
            this.list.forEach((item,i)=>{
              if(item.name.indexOf(name)!=-1){
                arr.push(item);
              }
            });
            return arr
          }
        }
      })
    </script>
    </body>
    </html>

    总结

    以上所述是小编给大家介绍的vue中的过滤器实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • vue2过滤器模糊查询方法
    • 在Vue methods中调用filters里的过滤器实例
    • 在vue中使用公共过滤器filter的方法
    • vue.js过滤器+ajax实现事件监听及后台php数据交互实例
    • Vue自定义过滤器格式化数字三位加一逗号实现代码
    • vue 过滤器filter实例详解
    • Vue 过滤器filters及基本用法
    • Vue filters过滤器的使用方法
    • vue货币过滤器的实现方法
    • Vue实现自带的过滤器实例

    广而告之:
    热门推荐:
    微信小程序button组件使用详解

    本文为大家分享了微信小程序button组件的使用方法,供大家参考,具体内容如下 展示效果图 button组件的常用属性 size:default、mini—-default为块级按钮、mini为小按钮 type:primary、default、warn—-primary提交成功、default默认灰色、warn警告色 plain:true、false—-按···

    JS去掉字符串末尾的标点符号及删除最后一个字符的方法

    需求:去掉js字符串末尾的标点符号 原字符串: Hello World! 目标字符串: Hello World 方式一: stringObject.slice(start,end) start : 要抽取的片断的起始下标。如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符 end:要抽···

    HTML5 Canvas中绘制椭圆的4种方法

    概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结。各种方法各有优缺,视情况选用。各方法的参数相同: 1.context为Canvas的2D绘图环境对象,2.x为椭圆中心横坐标,3.y为椭圆中心纵坐标,4.a为椭圆横半轴长,5.b为椭圆纵半轴长。 参数方程法 该···

    AngularJS中使用three.js的实例详解

    AngularJS中使用three.js的实例详解 一、轨迹球的引入问题 一开始我是用下面的方式引如轨迹球,但是会报Trackballcontrols is undefined的错。 import * as THREE from 'three'; import * as Trackballcontrols from 'three'; 但其实我是能够在node_module下的threejs的包中找···

    基于AngularJs select绑定数字类型的问题

    一、AngularJs中select绑定ng-model数字类型绑定问题 使用ng-model绑定select的时候默认是string字符串,如果指定的number值会绑定失败 举例说明: <body ng-app='module' ng-controller="myCtrl"> 请选择性别: <select name="sex" ng-model='sex' > <op···

    Vue 动态组件components和v-once指令的实现

    一、实现两个组件间互相展示、互相隐藏 <!DOCTYPE html> <html> <head> <title>动态组件</title> <script type="text/javascript" src="./vue-dev.js"></script> </head> <body> <div id="app"> <c···

    Windows下php+mysql5.7配置教程

    WINDOWS 下 PHP+MYSQL配置 下载mysql 地址:https://dev.mysql.com/downloads/ 点击Community 点击DOWNLOAD 选择下载的版本 点击 No thanks, just start my download. 下载得到mysql-5.7.18-winx64.zip 解压到C盘根目录,并改名为mysql57,进入mysql57,新建txt文件,改名···

    微信小程序开发之实现自定义Toast弹框

    前言 之前有篇文章是写的Toast使用,但是有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了。有一个插件可以直接帮我们完成,WeToast。 先来看一下效果图: 怎么用呢,我们来看一下: WeTaost插件源码位于src目录下,包含3个文件。 wetoast.js: 脚本代码 ···

    解决Webpack 热部署检测不到文件变化的问题

    今天在用Webpack开发的时候,突然发现文件变动后热部署功能不工作了,感觉好像是webpack检测不到文件的修改了。折腾了半天,开始一直以为是自己的代码有问题了,结果一次无意识的重启了一下机器后发现又可以热部署了,感觉像是见鬼了。于是继续观察。 一天后,不幸再次降临,问···

    js实现的格式化数字和金额功能简单示例

    本文实例讲述了js实现的格式化数字和金额功能。分享给大家供大家参考,具体如下: 格式化数字,格式化金额: function number_format(number, decimals, dec_point, thousands_sep) { /* * 参数说明: * number:要格式化的数字 * decimals:保留几位小数 * dec_poi···