vue中filter用法总结-js教程-PHP中文网

首页

web前端

js教程

vue中filter用法总结

php中世界最好的语言

May 15, 2018 am 11:42 AM

filter总结用法

这次给大家带来vue中filter用法总结，vue中filter使用的注意事项有哪些，下面就是实战案例，一起来看一下。

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>
    <p 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之前也可以先处理-->
    </p>
    <script type="text/javascript">
//    -----------------------------------------华丽分割线(从model->view)---------------------------------------
      Vue.filter("sum", function(value) {  //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
        return value + 4;
      });
      Vue.filter(&#39;cal&#39;, 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>
    <p 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之前也可以先处理-->
    </p>
    <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

这里写图片描述

（1）实例一原文

var app5 = new Vue({
  el: &#39;#app5&#39;,
  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>

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

这里写图片描述

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

处理Vue项目编译后部署在非网站根目录方法详解

vue实现移动端微信公众号步骤详解

以上是vue中filter用法总结的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

总结Linux系统中system()函数的用法Feb 23, 2024 pm 06:45 PM

Linux下system()函数的总结在Linux系统中，system()函数是一个非常常用的函数，它可以用于执行命令行命令。本文将对system()函数进行详细的介绍，并提供一些具体的代码示例。一、system()函数的基本用法system()函数的声明如下：intsystem(constchar*command);其中，command参数是一个字符

Python函数介绍：abs函数的用法和示例Nov 03, 2023 pm 12:05 PM

Python函数介绍：abs函数的用法和示例一、abs函数的用法介绍在Python中，abs函数是一个内置函数，用于计算给定数值的绝对值。它可以接受一个数字参数，并返回该数字的绝对值。abs函数的基本语法如下：abs(x)其中，x是要计算绝对值的数值参数，可以是整数或浮点数。二、abs函数的示例下面我们将通过一些具体的示例来展示abs函数的用法：示例1：计算

Python函数介绍：isinstance函数的用法和示例Nov 04, 2023 pm 03:15 PM

Python函数介绍：isinstance函数的用法和示例Python是一门功能强大的编程语言，提供了许多内置函数，使得编程变得更加方便和高效。其中一个非常有用的内置函数是isinstance()函数。本文将介绍isinstance函数的用法和示例，并提供具体的代码示例。isinstance()函数用于判断一个对象是否是指定的类或类型的实例。该函数的语法如下

解决“[Vue warn]: Failed to resolve filter”错误的方法Aug 19, 2023 pm 03:33 PM

解决“[Vuewarn]:Failedtoresolvefilter”错误的方法在使用Vue进行开发的过程中，我们有时候会遇到一个错误提示：“[Vuewarn]:Failedtoresolvefilter”。这个错误提示通常出现在我们在模板中使用了一个未定义的过滤器的情况下。本文将介绍如何解决这个错误并给出相应的代码示例。当我们在Vue的

教你使用Win10的快捷键Dec 30, 2023 am 11:32 AM

windows10常用快捷键可以为我们省去很多的时间，今天给大家介绍一些常用的快捷键用法，非常的方便快捷，下面一起来看看具体的使用方法吧。Win10快捷键用法介绍复制、粘贴和其他常规键盘快捷方式按此键执行此操作Ctrl+X剪切选定项Ctrl+C（或Ctrl+Insert）复制选定项Ctrl+V（或Shift+Insert）粘贴选定项Ctrl+Z撤消操作Alt+Tab在打开的应用之间切换Alt+F4关闭活动项，或者退出活动应用Windows徽标键+L锁定电脑Windows徽标键+D显示和隐藏桌面F

Python函数介绍：getattr函数的用法和示例Nov 04, 2023 pm 01:39 PM

Python函数介绍：getattr函数的用法和示例在Python中，getattr()是一个内置函数，用于获取对象的属性值。在不知道对象的属性名称的情况下，可以使用getattr()函数来动态地访问属性。本文将介绍getattr()函数的语法、用法和示例。getattr()函数的语法如下：getattr(object,name[,default])参数

在JavaScript中，onsearch事件的用法是什么？Sep 27, 2023 pm 03:49 PM

onsearch事件对于搜索很有用，即用户在输入元素中按ENTER或“x”键。的类型是search，因为它是供用户搜索的。InternetExplorer、Firefox和Opera不支持onsearch事件。示例您可以尝试运行以下代码来了解如何在JavaScript中实现onsearch事件。<!DOCTYPEhtml><html>  <body>   <p>

学会使用5个常用的Java工作流框架的基本概念和用法：从入门到精通Dec 27, 2023 pm 12:26 PM

从零开始：掌握5个Java工作流框架的基本概念与用法引言在软件开发领域，工作流是一种重要的概念，用于描述和管理复杂的业务流程。Java作为一种广泛应用的编程语言，也有许多优秀的工作流框架供开发者选择。本文将介绍5个Java工作流框架的基本概念与用法，帮助读者快速上手。一、ActivitiActiviti是一个开源的BPM（BusinessProcessM

See all articles