vue中的过滤器实例代码详解


Posted in Javascript onJune 06, 2019

过滤器

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  的值作为第三个参数。

最后送给大家一个实例:

vue中的过滤器实例代码详解

源代码:

<!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中的过滤器实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript 面向对象特性
Dec 28 Javascript
javascript与CSS复习(二)
Jun 29 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
webpack3之loader全解析
Oct 26 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
如何利用React实现图片识别App
Feb 18 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 #Javascript
原生js通过一行代码实现简易轮播图
Jun 05 #Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 #Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 #Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 #Javascript
优雅的处理vue项目异常实战记录
Jun 05 #Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 #Javascript
You might like
php实现的简单检验登陆类
2015/06/18 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
Python中的Numpy入门教程
2014/04/26 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
python+mysql实现简单的web程序
2014/09/11 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
UNIX文件名称有什么规定
2013/03/25 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
迎新晚会邀请函
2014/02/01 职场文书
奠基仪式主持词
2014/03/20 职场文书
党的群众路线学习材料
2014/05/16 职场文书
消防安全宣传口号
2014/06/10 职场文书
励志演讲稿600字
2014/08/21 职场文书
质量主管工作职责
2014/09/26 职场文书
求职信范文怎么写
2015/03/19 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python