vue 中filter的多种用法


Posted in Javascript onApril 26, 2018

1、自定义的过滤器,当然这包括注册在全局和注册在实例化的内部

(1)注册在全局的fliter

(1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

(2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算

(3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突

(4)用户从input输入的数据在回传到model之前也可以先处理

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>vue自定义过滤器</title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
  <body>
    <div class="test">
      <p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算。-->
      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
      <input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
    </div>
    <script type="text/javascript">
//    -----------------------------------------华丽分割线(从model->view)---------------------------------------
      Vue.filter("sum", function(value) {  //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
        return value + 4;
      });
      Vue.filter('cal', function (value, begin, xing) {  //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
        return value + begin + xing;
      });
//    -----------------------------------------华丽分割线(从view->model)---------------------------------------
      Vue.filter("change", {
        read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
          return value;
        },
        write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
          console.log("newVal:"+newVal); 
          console.log("oldVal:"+oldVal);
          return newVal;
        }
      });
      var myVue = new Vue({
        el: ".test",
        data: {
          message:12
        }
      });
    </script>
  </body>
</html>

filter是默认会传入当前的item,而且filter的第一个参数默认就是当前的item。

(2)注册在实例化内部

上面的例子直接注册在Vue全局上面,其他不用这个过滤器的实例也会被迫接受,其实过滤器可以注册在实例内部,仅在使用它的实例里面注册

 上面的程序改写为:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>vue自定义过滤器</title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
  <body>
    <div class="test">
      <p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算。-->
      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
      <input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
    </div>
    <script type="text/javascript">
      Vue.filter("change", {
        read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
          return value;
        },
        write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
          console.log("newVal:"+newVal); 
          console.log("oldVal:"+oldVal);
          return newVal;
        }
      });
      var myVue = new Vue({
        el: ".test",
        data: {
          message:12
        },
        filters: {
          sum: function (value) {
            return value + 4;
          },
          cal: function (value, begin, xing) {
            return value + begin + xing;
          }
        }
      });
    </script>
  </body>
</html>

2、使用js中的迭代函数filter

vue 中filter的多种用法 

(1)实例一原文

var app5 = new Vue({
  el: '#app5',
  data: {
    shoppingList: [
      "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
    ],
    key: ""
  },
  computed: {
    filterShoppingList: function () {
      // `this` points to the vm instance
      var key = this.key;
      var shoppingList = this.shoppingList;
      //在使用filter时需要注意的是,前面调用的是需要使用filter的数组,而给filter函数传入的是数组中的每个item,也就是说filter里面的函数,是每个item要去做的,并将每个结果返回。
      return shoppingList.filter(function (item) {
        return item.toLowerCase().indexOf(key.toLowerCase()) != -1
      });;
    }
  }
})

 <ul>
  Filter Key<input type="text" v-model="key">  
    <li v-for="item in filterShoppingList">
      {{ item }}
    </li>
  </ul>

最终效果实现了根据关键字来过滤列表的功能。

vue 中filter的多种用法 

 其他的一些Js 迭代方法——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()

总结

以上所述是小编给大家介绍的vue 中filter的多种用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
vue 全局环境切换问题
Oct 27 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 Javascript
vue自定义filters过滤器
Apr 26 #Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 #Javascript
react 创建单例组件的方法
Apr 26 #Javascript
node打造微信个人号机器人的方法示例
Apr 26 #Javascript
Vue 使用中的小技巧
Apr 26 #Javascript
基于Vue实现拖拽功能
Jul 29 #Javascript
vuex操作state对象的实例代码
Apr 25 #Javascript
You might like
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
javascript数组的使用
2013/03/28 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python3实现名片管理系统
2020/11/29 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
新教师工作感言
2014/02/16 职场文书
房地产端午节活动方案
2014/08/24 职场文书
收银员岗位职责
2015/02/03 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS