vue實現 toggle顯示隱藏效果

来源:https://www.cnblogs.com/ligulalei/archive/2019/03/29/10620640.html
-Advertisement-
Play Games

背景介紹jQuery中有個toggle()方法,可以切換元素的顯示狀態,在用vue時如果不引入jQuery如何實現這種效果?使用場景常見有三種場景:1.控制頁面中一個dom元素2.控制頁面中多個dom元素3.控制頁面中的dom元素是從服務端返回,且有多個技術分析1.一二場景下實現這種效果可以用v-i ...


背景介紹
jQuery中有個toggle()方法,可以切換元素的顯示狀態,在用vue時如果不引入jQuery如何實現這種效果?
使用場景
常見有三種場景:
1.控制頁面中一個dom元素
2.控制頁面中多個dom元素
3.控制頁面中的dom元素是從服務端返回,且有多個
技術分析
1.一二場景下實現這種效果可以用v-if指令,通過設置true或false來控制dom的隱藏與顯示。如果控制一個dom或多個dom我們可以在data中定義對應的flag,每次點擊事件發生時 flag=!flag ,來切換flag的值。這樣點擊的dom可以做的顯示或隱藏切換。
2.第一和第二種場景比較簡單按照上述方式可以實現,第三種場景用這種方法就不行了,因為我們不知道會從服務端返回幾個dom,所以也就不能具體的定義控制dom的flag變數。這種情況下要怎麼實現點擊從用服務端返回的數據渲染成的dom,來達到卻換隱藏和顯示效果?
實現方法
實現第三種場景可以用Vue.set()方法。具體實現方式如下:
1.第一步先定義一個data對象來接收從服務端返回的數據

data(){
  return {
    listAll:{}
  }
}

 

2.先定義個toggleShow()方法:

methods: {
  toggleShow(index){
    let obj = this.listAll[index]; // 找到點擊的dom對象
    obj.hide = !obj.hide; // 向這個對象中添加 hide 屬性
    this.$set(this.listAll, index, obj); // 把添加完hide 屬性的新對象set()進data數據中
  }
}

  


3.在標簽模板中調用toggleShow()方法

<div v-for="(item, index) in listAll" :key="index">
  <card @click.native="toggleShow(index)">
</card>
<div v-if="item.hide ? true:false">
  // 顯示或隱藏區域
</div>
</div>

歸納總結

實現這種需要有兩種方式
1.在data中定義固定的flag值,根據用切換flag值的方式來達到切換dom的顯示或隱藏
2.使用Vue.set()方法,在非同步請求會的數據中添加臨時hide屬性,來控制點擊的dom元素隱藏或顯示
如果不知道如何把從服務端接收的數據實時渲染的頁面中,可以翻看這篇文章:
vue非同步請求的數據怎樣實時渲染到頁面上?


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

-Advertisement-
Play Games
更多相關文章
  • JS中的offset家族:一、offsetWidth與offsetHeight:獲取的是元素的實際寬高 = width + border + padding 註意點: 1.可以獲取行內及內嵌的寬高 2.獲取到的值是一個number類型,不帶單位 3.獲取的寬高包含border和padding 4.只... ...
  • 今天用WebStorm運行html代碼時,出現中文亂碼,試了Settings里File Encodings,將編碼形式改為utf-8,結果還是不行。 最後用代碼解決了問題,代碼如下: <meta http-equiv="Content-Type" content="text/html;charset ...
  • radio組件 v-model : 通過當然綁定的值與input上的value值來確定當前選中項。 在父作用域中通過active設置當前預設選中項,如果選中項發生改變後通過input事件通知傳遞到父作用域,告知當前選中項.(自定義組件 v-model 數據雙向綁定) radioGroup組件 把ra ...
  • Friendly-errors-webpack-plugin 介紹 Friendly-errors-webpack-plugin識別某些類別的webpack錯誤,並清理,聚合和優先順序,以提供更好的開發人員體驗。 我們運行nodejs 可以看到錯誤信息如下: 安裝入門 npm install frie ...
  • 1.轉化為 年月日 2.轉化為 年月日 時分秒 ...
  • 在本次Webpack 4教程中,我們會更進一步講述項目優化。我們會學習什麼是tree shaking以及如何使用它。你會找到讓Webpack 4中tree shaking運作起來所需要的東西,並知道怎樣從中受益。開始吧! ...
  • ComboBox listeners:{ expand:function(){ //此函數是,點擊下拉框展開的時候事件 }, select:function(com, record, index){ //下拉框選擇事件 //比如二級聯動 }, change:function(this,newValu... ...
  • Math.random():獲取0~1隨機數Math.floor() method rounds a number DOWNWARDS to the nearest integer, and returns the result. (小於等於 x,且與 x 最接近的整數。)其實返回值就是該數的整數位 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...