vue でのフィルターの使用法の概要-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

vue でのフィルターの使用法の概要

php中世界最好的语言

May 15, 2018 am 11:42 AM

filter要約する使用法

今回はvueでのfilterの使い方をまとめてご紹介します。vueでfilterを使用する際の注意点を実際に見てみましょう。

1. カスタマイズされた filter には、もちろん、グローバルに登録することと、インスタンス化内で登録することが含まれます

(1) グローバルフィルターの登録

(1) グローバルメソッド Vue.filter() の登録カスタムフィルターを配置する必要がありますVue のインスタンス化前

(2) フィルター関数は常に expression の値を最初のパラメーターとして受け取ります。引用符付きのパラメーターは文字列として扱われ、引用符のないパラメーターは式として計算されます

(3) これら 2 つのフィルターの処理が競合しない限り、2 つのフィルターパラメーターを設定できます

(4) によって入力されたデータ入力からのユーザーは、モデルに返される前に処理することもできます

<!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>

フィルターはデフォルトで現在の項目を渡し、フィルターの最初のパラメーターはデフォルトで現在の項目になります。

(2) インスタンス化内に登録される

上記の例は、このフィルターを使用しない他のインスタンスも強制的に受け入れられます。インスタンスを使用する場合のみインスタンスに登録します

上記のプログラムを次のように書き換えます

vue でのフィルターの使用法の概要 (1) 例1 原文

<!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>

最終的に効果が実現しますキーワードに応じてリストをフィルタリングする機能。

vue でのフィルターの使用法の概要他のいくつかの Js 反復メソッド - filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()

ケースを読んだ後、あなたはそれをマスターしたと思いますこの記事では、さらにエキサイティングな方法については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Web サイト以外のルートディレクトリでのコンパイルとデプロイ後に Vue プロジェクトを処理する方法の詳細な説明

Vue モバイル WeChat 公式アカウントを実装する手順の詳細な説明

以上がvue でのフィルターの使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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])参数

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

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

Python函数介绍：next函数的用法和示例Nov 04, 2023 pm 04:23 PM

Python函数介绍：next函数的用法和示例引言：在Python中，函数是一种非常强大的工具，它可以帮助我们封装代码，实现代码的重用和模块化。在Python中，有许多内置函数可以直接调用，其中之一就是next函数。本文将介绍next函数的用法，并提供一些示例代码来说明其实际应用。希望通过本文的阐述，读者能更好地了解和运用next函数。一、next函数的用法

See all articles