vue指令

来源:https://www.cnblogs.com/cz-basic/archive/2022/11/20/16908283.html
-Advertisement-
Play Games

1、文本類指令 {{}}、v-text 都是用於綁定節點的文本; 二者區別:{{}}這種綁定值的方式在頁面會出現“{{}}”一閃而過的效果 解決{{}}在頁面出現一閃而過的辦法: // css: [v-cloak] { display: 'none' }// html <h1 v-cloak>{{m ...


1、文本類指令

  {{}}、v-text  都是用於綁定節點的文本; 

    二者區別:{{}}這種綁定值的方式在頁面會出現“{{}}”一閃而過的效果

    解決{{}}在頁面出現一閃而過的辦法:

 // css:
[v-cloak] {
    display: 'none'
}
// html
<h1 v-cloak>{{msg}}</h1>

  v-once 用於指令節點的內容只綁定一次,當前節點中所對應的變數變化,視圖不更新。

    通常情況下,v-once只能和{{}}一起用

  v-html 用於綁定動態的html節點,相當於DOM中的innerHTML,這個指令預設已經做了"防註入攻擊XSS"的處理。

  v-once和v-cloak都不需要接收表達式來作為值

2、動態屬性指令

  v-bind  用於動態綁定節點屬性(如:title,value,class,style等);經常簡寫成":屬性名"

  動態class語法1 <div :class="變數1 變數2"></div>   動態class語法2 <div :class="[表達式1,表達式2,...]"></div>        動態class語法3 <div :class="{類名1:布爾值1,類名2:布爾值2,...}"></div>        動態class語法1 <div :style="`color:red;fontSize:20px`"></div>        動態class語法2 <div :style="[{k1:v1,k2:v2},{k3:v3},...]"></div>        動態class語法3 <div :style="{k1:v1,k2:v2,....}"></div>   這三種語法可以交叉使用,但實際上很少有人交叉使用。 3、事件綁定

  v-on 用於給視圖綁定各種js事件,比如:click,mouseenter,blur等,簡寫成: "@事件名"

  事件修飾符:.stop 阻止冒泡 ,.enter等,可以鏈式調用。

4、表單綁定

  v-model 用於表單取值(表單雙向綁定),比如input/select/textarea等。

  表單三個修飾符:.trim自動去除文本首尾空格

          .number只能輸入數字

          .lazy 用於性能,當表單失去焦點時再進行雙向綁定

5、列表渲染

  v-for  用於渲染列表、對象等。

6、條件渲染

  v-show 相當於控制節點的display: none/block

  v-if / v-else-if / v-else  這是真正的移除或插入視圖節點,比較耗費性能,不建議和v-for一起使用。

  v-for的優先順序比v-if更高。

7、其它指令

  v-pre 用於調試,可以阻止vue編譯器對指令的編譯

  v-slot 指定具名插槽


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux的定時任務是基於cron驅動做到的 安裝 Ubantu系統下安裝crontab 正常情況下需要先執行:apt-get upgrade 進行升級 安裝:apt-get install cron 啟動:service cron start 重啟:service cron restart 停止: ...
  • Linux的文件系統分層結構: Lunux文件系統常用的目錄如下: 根目錄(/):根目錄是整個系統最重要的一個目錄,因為不但所有的目錄都是由根目錄衍生出來的,同時根目錄也與開機、還原、系統修複等操作有關。 執行文件目錄(/bin):所有用戶使用的基本命令:不能關聯至獨立分區,OS啟動即會用到的程式 ...
  • 本文章沒有任何宣傳產品等盈利性質,所有的陳述均為博主真實的日常使用。 關於電腦 現在很多學電腦的同學總是抱怨自己的電腦卡卡卡,打開一看360,金山等安全軟體在瘋狂打架,桌面各種文件堆得也是稀碎,再打開文件資源管理器一看,好家伙,C盤都紅了,各種文件堆在盤裡也是亂七八糟。清理垃圾本身沒多煩,21世紀 ...
  • 一、安裝VMware Workstation虛擬機 下載VMware Workstation 16 PRO虛擬機 https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evaluation.html,下載後安裝即可,安裝 ...
  • 1.虛擬機下載 官網下載地址:https://www.kali.org/get-kali/#kali-virtual-machines 選擇VMware版本下載,並解壓 2.打開虛擬機 選擇打開虛擬機,瀏覽到剛纔壓縮包解壓路徑,選擇.vmx文件打開 開啟此虛擬機 用戶名密碼都是kali 3.設置ro ...
  • 世界上的開源許可證(Open Source License)大概有上百種,而我們常用的開源軟體協議大致有GPL、BSD、MIT、Mozilla、Apache和LGPL。 從下圖中可以看出幾種開源軟體協議的區別。 以下是上述協議的簡單介紹: GPL GNU是GNU General Public Lic ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者: 如常 Debezium Incremental snapshotting Introduction CDC(Change-Data-Captur ...
  • 資料庫面試測試題(一) 簡述當前主流RDBMS軟體有哪些?開源且跨平臺的資料庫軟體有哪些? 參考答案 當前主流的資料庫伺服器軟體有: Oracle 、 DB2 、 SQL SERVER 、MySQL 等 ,其中只有MySQL是既開源又跨平臺的資料庫服務軟體。 簡述MySQL資料庫的服務進程名、預設端 ...
一周排行
    -Advertisement-
    Play Games
  • PasteSpider是什麼? 一款使用.net編寫的開源的Linux容器部署助手,支持一鍵發佈,平滑升級,自動伸縮, Key-Value配置,項目網關,環境隔離,運行報表,差量升級,私有倉庫,集群部署,版本管理等! 30分鐘上手,讓開發也可以很容易的學會在linux上部署你得項目! [從需求角度介 ...
  • SQLSugar是什麼 **1. 輕量級ORM框架,專為.NET CORE開發人員設計,它提供了簡單、高效的方式來處理資料庫操作,使開發人員能夠更輕鬆地與資料庫進行交互 2. 簡化資料庫操作和數據訪問,允許開發人員在C#代碼中直接操作資料庫,而不需要編寫複雜的SQL語句 3. 支持多種資料庫,包括但 ...
  • 在C#中,經常會有一些耗時較長的CPU密集型運算,因為如果直接在UI線程執行這樣的運算就會出現UI不響應的問題。解決這類問題的主要途徑是使用多線程,啟動一個後臺線程,把運算操作放在這個後臺線程中完成。但是原生介面的線程操作有一些難度,如果要更進一步的去完成線程間的通訊就會難上加難。 因此,.NET類 ...
  • 一:背景 1. 講故事 前些天有位朋友在微信上丟了一個崩潰的dump給我,讓我幫忙看下為什麼出現了崩潰,在 Windows 的事件查看器上顯示的是經典的 訪問違例 ,即 c0000005 錯誤碼,不管怎麼說有dump就可以上windbg開幹了。 二:WinDbg 分析 1. 程式為誰崩潰了 在 Wi ...
  • CSharpe中的IO+NPOI+序列化 文件文件夾操作 學習一下常見的文件、文件夾的操作。 什麼是IO流? I:就是input O:就是output,故稱:輸入輸出流 將數據讀入記憶體或者記憶體輸出的過程。 常見的IO流操作,一般說的是[記憶體]與[磁碟]之間的輸入輸出。 作用 持久化數據,保證數據不再 ...
  • C#.NET與JAVA互通之MD5哈希V2024 配套視頻: 要點: 1.計算MD5時,SDK自帶的計算哈希(ComputeHash)方法,輸入輸出參數都是byte數組。就涉及到字元串轉byte數組轉換時,編碼選擇的問題。 2.輸入參數,字元串轉byte數組時,編碼雙方要統一,一般為:UTF-8。 ...
  • CodeWF.EventBus,一款靈活的事件匯流排庫,實現模塊間解耦通信。支持多種.NET項目類型,如WPF、WinForms、ASP.NET Core等。採用簡潔設計,輕鬆實現事件的發佈與訂閱。通過有序的消息處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。 ...
  • 一、基本的.NET框架概念 .NET框架是一個由微軟開發的軟體開發平臺,它提供了一個運行時環境(CLR - Common Language Runtime)和一套豐富的類庫(FCL - Framework Class Library)。CLR負責管理代碼的執行,而FCL則提供了大量預先編寫好的代碼, ...
  • 本章將和大家分享在ASP.NET Core中如何使用高級客戶端NEST來操作我們的Elasticsearch。 NEST是一個高級別的Elasticsearch .NET客戶端,它仍然非常接近原始Elasticsearch API的映射。所有的請求和響應都是通過類型來暴露的,這使得它非常適合快速上手 ...
  • 參考delphi的代碼更改為C# Delphi 檢測密碼強度 規則(仿 google) 仿 google 評分規則 一、密碼長度: 5 分: 小於等於 4 個字元 10 分: 5 到 7 字元 25 分: 大於等於 8 個字元 二、字母: 0 分: 沒有字母 10 分: 全都是小(大)寫字母 20 ...