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 相关文章推荐
javascript学习笔记(五)正则表达式
Apr 08 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
vue实例的选项总结
Jun 09 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
操作Oracle的php类
2006/10/09 PHP
写一个用户在线显示的程序
2006/10/09 PHP
PHP 高级课程笔记 面向对象
2009/06/21 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
动态样式类封装JS代码
2009/09/02 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
用C++封装MySQL的API的教程
2015/05/06 Python
python实现解数独程序代码
2017/04/12 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python学习入门之区块链详解
2017/07/25 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
Python字符串三种格式化输出
2020/09/17 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
python空元组在all中返回结果详解
2020/12/15 Python
教师自我鉴定
2013/12/13 职场文书
优秀教师先进事迹
2014/01/22 职场文书
办理收楼委托书范本
2014/10/09 职场文书
六查六看心得体会
2014/10/14 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL