vue 列表實現點擊顯示影藏

paulquei 發布于2019-08-20 16:45 / 3052人閱讀

摘要：實現原理為每個列表項創建一個多帶帶的組件，然后每個組件都可以擁有自己的標志。

實現原理：為每個列表項創建一個多帶帶的組件，然后每個組件都可以擁有自己的isActive標志。

#js
Vue.component("toggle-list-item", {
  template: "#list-item",
  props: ["item"],
  methods: {
    toggle() {
      this.isActive = !this.isActive;
    }
  },
  data() {
    return {
      isActive: false
    }
  },
})

new Vue({
  el: "#app",
  data: {
    items: [{
      text: "foo",
      desc: "foo desc"
    }, {
      text: "bar",
      desc: "bar desc"
    }, {
      text: "baz",
      desc: "baz desc"
    }]
  }
});

GPU云服務器云服務器點擊顯示列表js代碼 js實現點擊菜單顯示 VUE實現webrtc Vue實現分頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83131.html

帶你玩轉Postman的集合

摘要：選擇選項，可以添加名稱和描述的數據，以便其他用戶了解你的相關信息，如圖創建一個新集合。如果用戶正在處理一些特定的集合，可以單擊圖標將集合置頂，如圖過濾集合。集合...

Bowman_han 2021-11-22 09:34 評論0 收藏0
從零開始實現一個Vue級聯組件

摘要：從零開始實現一個級聯組件本文實現級聯組件需要用到自定義指令和組件通信相關知識，最好先閱讀以下兩篇文章自定義指令組件基礎與通信一組件簡介本文實現的是一個省市縣多級聯動組件，當組件渲染完成后默認會加載出所有的省名稱，當用戶點擊某個省的名稱后，右從零開始實現一個Vue級聯組件本文實現級聯組件需要用到自定義指令和組件通信相關知識，最好先閱讀以下兩篇文章: Vue自定義指令 Vue組件基礎與...

binaryTree 2019-08-26 14:05 評論0 收藏0
vue keep-alive實現動態緩存以及緩存銷毀

摘要：實現動態緩存以及緩存銷毀需求來源及描述后臺管理系統中，左側為功能菜單欄，點擊菜單列表，右側顯示該菜單的功能頁面，本來是一個非常簡單的后臺管理系統布局，現在增加了菜單按鈕點擊左側菜單欄時，右側頁面頭部顯示當前的頁面標題，形成一個列表，點擊可 vue keep-alive實現動態緩存以及緩存銷毀需求來源及描述后臺管理系統中，左側為功能菜單欄，點擊菜單列表，右側顯示該菜單的功能頁面，本來...

littleGrow 2019-08-26 10:10 評論0 收藏0
Vue keepAlive 數據緩存工具，實現返回上一個頁面瀏覽的位置；

摘要：需求分析背景數據列表頁，滾動加載數據多條數據情況下，點擊某一條，進入詳細頁進行編輯修改，刪除操作保存返回上一頁在上面的情況下，想要保持在上次瀏覽位置，并且保持數據是最新的解決辦法原始的辦法在點擊詳情頁的時候，記住瀏覽位置，傳遞參數或者存到本需求分析背景：1.數據列表頁，滾動加載數據；2.多條數據情況下，點擊某一條，進入詳細頁進行編輯（修改，刪除）操作；3.保存返回上一頁；在上面的...

everfly 2019-08-26 18:27 評論0 收藏0