過濾器以及事件的獲取

阿新 • • 發佈：2021-01-03

過濾器（filter）

我們在渲染資料的過程中，有一些內容並不是我們想要的文字格式，這個時候我們可以利用過濾器去實現我們的文字格式化。過濾器其實就是一個工具函式，通過執行這個函式，實現資料格式化。
比如：後端返回給前端的時間格式：時間戳 1604370847913
使用者要看到的資料格式： 2020/11/3 10:34  或者 2020-11-3
通過過濾符 ‘|’ 去呼叫過濾器

過濾器建立方式之區域性過濾器

檢視：
{{資料 | 過濾器名稱}}

邏輯程式碼
filters:{
    toPrice(n,m){
        //第一個引數是你要過濾的內容
        //第二個引數是你呼叫過濾器的傳參
        return 結果就是文字格式化的結果
    }
}

其實在專案中，區域性過濾器用的比較少，因為程式碼檔案很多，每一個頁面都可能用到同一個過濾器比如時間轉化，如何解決？

利用全域性過濾器

過濾器建立方式之全域性過濾器

檢視
{{msg|toStr(4,6)}}

邏輯
//全域性過濾器 Vue.filter() 它有兩個引數，第一個引數是你要過濾的內容，第二個引數是你的邏輯函式，這個函式有兩個引數，①要過濾的內容，②要過濾內容的傳參
     Vue.filter('toStr',(n,m)=>{
       return n.substring(m)
     })

過濾器的應用案例之時間轉化

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="./node_modules/vue/dist/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <ul>
    <li v-for="item in newsList">
     <p>新聞標題：{{item.title}}</p>
     <p>發表時間:{{item.pTime | toTime('yyyy-MM-dd HH:mm:ss')}}</p>
     <p>發表時間:{{item.pTime | toTime('yyyy/MM/dd HH:mm:ss')}}</p>
     <p>發表時間:{{item.pTime | toTime}}</p>
     <p>單價：{{item.price | toPrice}}</p>
    </li>
   </ul>
  </div>
  <script>
   //字串補位的方法  padStart() 在字串前面補位  padEnd 在字串結尾補位
   // let str = '你好'
   // let result = str.padStart(5,'x')
   // let result1 = str.padEnd(6,'x')
   //建立全域性過濾器
   Vue.filter("toTime", (timer,type) => {
    let date = new Date(timer);
    //獲取年份
    let year = date.getFullYear();
    //獲取月份
    let month =((date.getMonth() + 1)+'').padStart(2,'0')
    //獲取天數
    let day = (date.getDate() +'').padStart(2,'0')
    let hour = (date.getHours() +'').padStart(2,'0')
    let minute = (date.getMinutes() +'').padStart(2,'0')
    let second = (date.getSeconds() +'').padStart(2,'0')
    console.log(day);
    //return `${year}/${month}/${day}`
    if(type=='yyyy-MM-dd HH:mm:ss'){
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
     }else if(type=='yyyy/MM/dd HH:mm:ss'){
      return `${year}/${month}/${day} ${hour}:${minute}:${second}`
     }else{
       return `${year}-${month}-${day}`
     }
    
    });
   Vue.filter("toPrice",(n)=>{
     return n.toFixed(2)
    })
   new Vue({
    el: "#app",
    data: {
     newsList: [
       {
       id: 1,
       title: "華春瑩懟蓬佩奧，以彼之句式還施彼身！",
       pTime: 1604374197699, //發表時間
       price:99
       },
       {
       id: 2,
       title: "外交部迴應在美記者簽證實際延期僅三天",
       pTime: 1608374197699, //發表時間
       price:1999
       },
       {
       id: 3,
       title: "北京新增2例境外輸入新冠肺炎確診病例和1例無症狀感染者",
       pTime: 1614374197699, //發表時間
       price:799
       },
       {
       id: 4,
       title: "譚德塞被確認為新冠陽性病例接觸者後，世衛組織迴應",
       pTime: 1623374197699, //發表時間
       price:886
       },
      ],
     },
    });
  </script>
 </body>
</html>

過濾器以及事件的獲取

過濾器（filter）我們在渲染資料的過程中，有一些內容並不是我們想要的文字格式，這個時候我們可以利用過濾器去實現我們的文字格式化。過濾器其實就是一個工具函式，通過執行這個函式，實現資料格式化。比如：後端返

Python2.7:使用Pyhook模組監聽滑鼠鍵盤事件-獲取座標例項

Python2.7: 使用Pyhook模組監聽滑鼠鍵盤事件-獲取座標。因該模組對Python3 有相容性問題，故採用python2.7直譯器。

vue 通過繫結事件獲取當前行的id操作

如下所示： <div @click=\"router(items.productId)\" style=\"float: left;\" :key=\'items.productName\' v-for=\"items in item\"> </div>

VUE 過濾器以及外掛

VUE 過濾器以及外掛過濾器什麼是過濾器過濾器對將要顯示的文字，先進行特定格式化處理，然後在進行顯示。

JavaScript文件載入模式以及元素獲取

一、文件載入模式 1.事件三要素：事件源（觸發時間的元素）；事件名稱（click點選事件）；事件處理程式（事件出發後要執行的程式碼函式形式）存在問題：瀏覽器載入一個頁面的時候，是按照自上而下的順序載入的，若將

vue.js click點選事件獲取當前元素物件的操作

Vue.js可以傳遞$event物件 <body id=\"app\"> <ul> <li v-on:click=\"say(\'hello!\',$event)\">點選當前行文字</li>

解決springboot中配置過濾器以及可能出現的問題

在springboot新增過濾器有兩種方式： 1、通過建立FilterRegistrationBean的方式（建議使用此種方式，統一管理，且通過註解的方式若不是本地除錯，如果在filter中需要增加cookie可能會存在寫不進前端情況）

FileSystemResource 和 ClassPathResource 以及 ServletContextResource 獲取資源用法

FileSystemResource 和 ClassPathResource 是 java 中比較常見的兩個獲取資源的類。除了他們兩個之外，還有一個也比較常用。那就是ServletContextResource。本文介紹他們三個的用法。

vue實現動態給id賦值,點選事件獲取當前點選的元素的id操作

：id繫結 :id=\"‘a_\'+index\" 輸出的id為a_0，a_1。。。。。 <div v-for=\"(item,index) in list\" :key=\"index\" >

react native 自定義Button元件以及事件

1.建立自定義CKButton.js元件類 1 import React,{Component} from \'react\'; 2 import { 3View, 4StyleSheet,

C#根據總價、購買總件數以及單價獲取購買商品的方案

技術標籤：無聊之作 /// <summary> /// 獲取方案 /// </summary> /// <param name="nTotalFund">總資金</param>

Uniapp/微信H5/JSDK配置/相容IOS以及Android獲取有效Config資訊

技術標籤：微信公眾號H5開發前端html5node.js 微信H5關於獲取微信JSDK（uniapp） Android、IOS瀏覽器內建環境的相容編譯配置Hash、History模式的選擇配置Demo示例

vue事件獲取事件物件，獲取事件源，獲取當前元素，動態新增樣式

技術標籤：vue.js快跑vuejavascriptes6css3 vue事件獲取事件物件，獲取事件源，獲取當前元素

使用 element-UI 的 el-button 時，通過點選事件獲取標籤內部的值

<el-button type=\"text\" icon=\"glyphicon glyphicon-thumbs-up\" @click=\"get_val($event)\">22 </el-button>

1.腳手架react 和 JSX 以及事件

全域性安裝 react 腳手架 : npm i create-react-app -g 安裝專案 create-react-app 專案名

說說 JVM 的堆轉儲檔案以及獲取方式

JVM 的堆轉儲檔案（heap dump）是某個時間點、Java 程式的記憶體快照。包含了當時記憶體中還沒有被 full GC 回收的物件和類資訊。

Python獲取Redis所有Key以及內容的方法

一、獲取所有Key # -*- encoding: UTF-8 -*- __author__ = \"Sky\" import redis pool=redis.ConnectionPool(host=\'127.0.0.1\',port=6379,db=0)

mysql 獲取昨天日期、今天日期、明天日期以及前一個小時和後一個小時的時間

1、當前日期 select DATE_SUB(curdate(),INTERVAL 0 DAY) ; 2、明天日期 select DATE_SUB(curdate(),INTERVAL -1 DAY) ;

微信小程式分享小程式碼的生成（帶引數）以及引數的獲取

1.小程式碼介紹從微信小程式開發文件上我們可以瞭解到，目前微信支援兩種二維碼（左），小程式碼和小程式二維碼（右）。官方推薦使用小程式碼，因為小程式碼具有更好的辨識度。

C#之獲取PDF張數以及PDF轉JPG

一：開啟管理NuGet程式包進行安裝Aspose.Pdf.dll 二：實踐 (1)獲取PDF頁數 /// <summary>

過濾器以及事件的獲取

過濾器（filter）

過濾器建立方式之區域性過濾器

過濾器建立方式之全域性過濾器

過濾器的應用案例之時間轉化

相關推薦