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 继承机制的实现(待续)
May 18 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 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 mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
详解php中反射的应用
2016/03/15 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
Python编程之序列操作实例详解
2017/07/22 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
应届大学生简历中的自我评价
2014/01/15 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
2014年预算员工作总结
2014/12/05 职场文书
小学老师对学生的评语
2014/12/29 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
体检通知范文
2015/04/21 职场文书
大学军训心得体会800字
2016/01/11 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python