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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
一文了解Vue中的nextTick
May 06 Javascript
js判断密码强度的方法
Mar 18 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
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 URL参数获取方式的四种例子
2014/02/28 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
PHP常用的小程序代码段
2015/11/14 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP链表操作简单示例
2016/10/15 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
Python基本数据类型详细介绍
2014/03/11 Python
Python中asyncore的用法实例
2014/09/29 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
Python中函数参数调用方式分析
2018/08/09 Python
如何通过python画loss曲线的方法
2019/06/26 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
python文件操作的简单方法总结
2019/11/07 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
如何用python批量调整视频声音
2020/12/22 Python
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
本科毕业生专业自荐书范文
2014/02/05 职场文书
开学典礼主持词
2014/03/19 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS
OpenCV实现常见的四种图像几何变换
2022/04/01 Python