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 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
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实现获取及设置用户访问页面语言类
2014/09/24 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
省三好学生申请材料
2014/01/22 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
关于母亲节的感言
2014/02/04 职场文书
大四毕业生自荐书
2014/07/05 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
考试作弊检讨书
2015/01/27 职场文书
安全生产标语口号
2015/12/26 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android