前端基礎之《Vue(10)—過濾器》

一、過濾器

1、作用
用于數據處理。

2、全局過濾器
使用Vue.filter('名稱', val=>{return newVal})定義。
在任何組件中都可以直接使用。

3、局部過濾器
使用選項,filters: {}定義,只能在當前組件中使用。

4、過濾器在Vue 3.0中已經淘汰了

5、過濾器只能用在{{}}和v-bind中,不支持其他指令

6、過濾器還可以鏈式調用{{num | f1 | f2}},過濾器是有順序的

二、例子代碼

<html>
<head><title>過濾器</title><style>[v-cloak] {display: none;}</style>
</head>
<body><div id="app"><h1 v-cloak>{{price | rmb}}</h1><h1 v-cloak>{{num | myfilter}}</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>Vue.filter('rmb', val=>{// 做任何復雜的處理return '¥' + Number(val).toFixed(2)})const app = new Vue({data() {return {price: 99.9,num: 202219}},filters: {myfilter(val) {return '學號' + val}}})app.$mount('#app')</script></body>
</html>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/78266.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/78266.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/78266.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

平板電腦做歐盟網絡安全法案(EU)2022/30

平板電腦做歐盟網絡安全法案&#xff08;EU&#xff09;2022/30 平板電腦做EN18031,平板電腦做無障礙法規EU2019/882 歐盟委員會于2022年通過補充授權法案 &#xff08;EU&#xff09; 2022/30&#xff0c;明確要求無線電設備需滿足網絡安全、隱私保護及反欺詐要求。 新規時間軸…

Unity中打可選擇的AssetBundle,以及URP中加載AssetBundle包Shader丟失問題顯示洋紅色的解決方案

在上一篇打AssetBundle中已經實現了簡單的打AB包和加載,《Unity中打包AssetBundle并加載》,本篇筆記是進一步上一篇最后提出的問題,進行優化。 一、打可選擇的AssetBundle 每次打包都會把設置了AssetBundle名稱和后綴的所有文件都打包,這也是現在網上教學最多的 但是有時…

解決cannot find attribute `serde` in this scope記錄

問題描述&#xff1a; 在Rust中使用serde做json序列化&#xff0c;需要對一個字段指定序列化方法&#xff0c;添加serde注解后報錯: error: cannot find attribute serde in this scope --> src\models\order_model.rs:38:7 | 38 | #[serde(deserialize_with &qu…

基于whisper和ffmpeg語音轉文本小程序

目錄 一、環境準備 ? 第一步&#xff1a;安裝并準備 Conda 環境 ? 第二步&#xff1a;創建 Whisper 專用的 Conda 虛擬環境 ? 第三步&#xff1a;安裝 GPU 加速版 PyTorch&#xff08;適配 RTX 4060&#xff09; ? 第四步&#xff1a;安裝 Whisper 和 FFMPEG 依賴 ?…

Linux GPIO驅動開發實戰:Poll與異步通知雙機制詳解

1. 引言 在嵌入式Linux開發中&#xff0c;GPIO按鍵驅動是最基礎也最典型的案例之一。本文將基于一個支持poll和異步通知雙機制的GPIO驅動框架&#xff0c;深入剖析以下核心內容&#xff1a; GPIO中斷與防抖處理環形緩沖區設計Poll機制實現異步通知(SIGIO)實現應用層交互方式 …

【最新版】西陸健身系統源碼全開源+uniapp前端

一.系統介紹 一款基于UniappThinkPHP開發健身系統&#xff0c;支持多城市、多門店&#xff0c;包含用戶端、教練端、門店端、平臺端四個身份。有團課、私教、訓練營三種課程類型&#xff0c;支持在線排課。私教可以通過上課獲得收益&#xff0c;在線申請提現功能&#xff0c;無…

濟南國網數字化培訓班學習筆記-第二組-6-輸電線路現場教學

輸電線路現場教學 桿塔組裝 角鋼塔 角鋼-連扳-螺栓 螺栓&#xff08;M&#xff09;&#xff1a; 腳釘-螺栓&#xff08;螺栓頭-無扣長-螺紋-螺帽&#xff09;-墊片-螺帽/防盜帽/防松帽M20*45 表示直徑20mm&#xff0c;長度45mm螺栓級別由一個類似浮點數表示&#xff0c;如…

抖音的逆向工程獲取彈幕(websocket和protobuf解析)

目錄 聲明前言第一節 獲取room_id和ttwid值第二節 signture值逆向python 實現signature第三節 Websocket實現長鏈接請求protubuf反序列化pushFrame反序列化Response解壓和反序列化消息體Message解析應答ack參考博客聲明 本文章中所有內容僅供學習交流使用,不用于其他任何目的…

反射,枚舉,lambda表達式

目錄 反射枚舉的使用Lambda表達式函數式接口語法Lambda表達式語法精簡 變量捕獲Lambda在集合List中的使用 反射 作用&#xff1a;在Java代碼中&#xff0c;讓一個對象認識到自己 比如一個類的名字&#xff0c;里面的方法&#xff0c;屬性等 讓程序運行的過程&#xff0c;某個對…

鴻蒙移動應用開發--渲染控制實驗

任務&#xff1a;使用“對象數組”、“ForEach渲染”、“Badge角標組件”、“Grid布局”等相關知識&#xff0c;實現生效抽獎卡案例。如圖1所示&#xff1a; 圖1 生肖抽獎卡實例圖 圖1(a)中有6張生肖卡可以抽獎&#xff0c;每抽中一張&#xff0c;會通過彈層顯示出來&#xf…

webpack基礎使用了解(入口、出口、插件、加載器、優化、別名、打包模式、環境變量、代碼分割等)

目錄 1、webpack簡介2、簡單示例3、入口(entry)和輸出(output)4、自動生成html文件5、打包css代碼6、優化&#xff08;單獨提取css代碼&#xff09;7、優化&#xff08;壓縮過程&#xff09;8、打包less代碼9、打包圖片10、搭建開發環境&#xff08;webpack-dev-server&#xf…

Java快速上手之實驗4(接口回調)

1&#xff0e;編寫接口程序RunTest.java&#xff0c;通過接口回調實現多態性。解釋【代碼4】和【代碼6】的執行結果為何不同&#xff1f; interface Runable{ void run(); } class Cat implements Runable{ public void run(){ System.out.println("貓急上樹.."…

Volcano 實戰快速入門 (一)

一、技術背景 隨著大型語言模型&#xff08;LLM&#xff09;的蓬勃發展&#xff0c;其在 Kubernetes (K8s) 環境下的訓練和推理對資源調度與管理提出了前所未有的挑戰。這些挑戰主要源于 LLM 對計算資源&#xff08;尤其是 GPU&#xff09;的巨大需求、分布式任務固有的復雜依…

Qwen2.5簡要全流程以及QA

1 輸入prompt 得到input id input id&#xff1a; [B,L] # batch size , lenth 2 embeding之后得到 input_embeds: [B,L,D] # demensions 3 進入Transformer層 先通過linear層得到shape不變的 QKV 多頭注意力 分割Dimension &#xff0c; kv變成 [B,H,L,head_dim] h是…

爬蟲學習——Item封裝數據與Item Pipeline處理數據

一、Item封裝數據 對于有字段的數據&#xff0c;最好的數據結構維護方法為字典類型(dict)&#xff0c;但是由于字典不便于攜帶元數據和傳遞給其他組件使用&#xff0c;故可以使用Item類封裝爬取到的數據。 這里涉及兩個類&#xff1a;Item基類和Field類 兩者的使用關系如下&…

【React】狀態管理 Context API \ MobX \ Redux

Context APIMobXRedux React有自己狀態管理&#xff0c;周邊生態也有很多狀態管理 Context API 直接從react中引入并調用即可&#xff0c;context包含兩個東西&#xff1a; Provider&#xff1a;提供商&#xff08;翻譯&#xff09;&#xff0c;提供數據&#xff1b;屬性&…

RK3588上編譯opencv 及基于c++實現圖像的讀入

參考博文&#xff1a; https://blog.csdn.net/qq_47432746/article/details/147203889 一、安裝依賴包 sudo apt install build-essential cmake git pkg-config libgtk-3-dev libavcodec-dev libavformat-dev libswscale-dev libv4l-dev libxvidcore-dev libx264-dev libjpe…

MATLAB 訓練CNN模型 yolo v4

學生對小車控制提出了更好的要求&#xff0c;能否加入深度學習模型。 考慮到小車用matlab來做&#xff0c;yolo v5及以上版本都需要在pytorch下訓練&#xff0c;還是用早期版本來演示。 1 yolov4 調用 參考 trainYOLOv4ObjectDetector (mathworks.com) name "tiny-yo…

Windows下使用 VS Code + g++ 開發 Qt GUI 項目的完整指南

&#x1f680; 使用 VS Code g 開發 Qt GUI 項目的完整指南&#xff08;Windows MSYS2&#xff09; 本指南幫助你在 Windows 下使用 VS Code g CMake Qt6 快速搭建 Qt GUI 項目&#xff0c;適合熟悉 Visual Studio 的開發者向跨平臺 VS Code 工具鏈遷移。 &#x1f6e0;?…

開源漏洞掃描器:OpenVAS

一、OpenVAS介紹 OpenVAS (Open Vulnerability Assessment System) 是一款功能強大的開源漏洞掃描器。它由 Greenbone Networks 開發和維護&#xff0c;是 Greenbone 安全管理器 (GSM) 產品的基礎&#xff0c;同時也有免費的社區版本&#xff08;Greenbone Community Edition&…