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 特殊字符
Apr 05 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
深度解读vue-resize的具体用法
Jul 08 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
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
自制PHP框架之设计模式
2017/05/07 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
不同Jquery版本引发的问题解决
2013/10/14 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
python远程登录代码
2008/04/29 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python实现按行分割文件
2019/07/22 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
2014年监理个人工作总结
2014/12/11 职场文书
实习证明模板
2015/06/16 职场文书
新生儿未入户证明
2015/06/23 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript