快捷導(dǎo)航

vue 點(diǎn)擊展開顯示更多(點(diǎn)擊收起部分隱藏)

更新時(shí)間：2019年04月09日 14:31:23 作者：優(yōu)雅的勒布朗

這篇文章主要介紹了vue 點(diǎn)擊展開顯示更多(點(diǎn)擊收起部分隱藏)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

功能如下：

這里就需要一開始只顯示6個(gè)數(shù)據(jù)，點(diǎn)擊展開才顯示全部

HTML里調(diào)用showdetailList：

<div>
    <p v-for="(item, index) in showdetailList">
      <span>{{item.title}}</span>
      <span>{{item.name}}</span>
     </p>
</div>
<div v-if="detailList.length > 6" v-on:click="changeFoldState">
     <span>{{brandFold?'展開':'收起'}}</span>
 </div>

data數(shù)據(jù)：

data() {
   return {
brandFold: true
   }
}

moke一個(gè)數(shù)據(jù)：

mocData() {
  var items = ['Dr.Ci:Labo城野醫(yī)生', '日本', '控油  收斂毛孔', '任何膚質(zhì)', '面部', '化妝水', '任何膚質(zhì)', '面部', '化妝水']
  var lists = ['商品品牌', '品牌國(guó)', '功能', '適合膚質(zhì)', '適用部位', '產(chǎn)品類型', '商品品牌', '品牌國(guó)', '功能']
  for (var i = 0; i < items.length; i++) {
     let item = {title: lists[i], name: items[i]}
     this.detailList.push(item)
  }
  console.log(this.detailList)
}

使用computed屬性：

set方法里的val值就是get方法返回的值

computed: {
  showdetailList: {
   get: function () {
     if (this.brandFold) {
       if (this.detailList.length < 7) {
        return this.detailList
       }
       let newArr = []
       for (var i = 0; i < 6; i++) {
         let item = this.detailList[i]
         newArr.push(item)
       }
       return newArr
      }
      return this.detailList
    },
    set: function (val) {
      this.showdetailList = val
    }
  }
}

changeFoldState方法：

changeFoldState() {
    this.brandFold = !this.brandFold
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue編寫多地區(qū)選擇組件
這篇文章主要為大家詳細(xì)介紹了Vue編寫一個(gè)挺靠譜的多地區(qū)選擇組件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
vue3?組件與API直接使用的方法詳解(無(wú)需import)
這篇文章主要介紹了vue3?組件與API直接使用的方法(無(wú)需import)，主要包括vue3自動(dòng)導(dǎo)入和API的自動(dòng)引入問題，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-09-09
Vue前端項(xiàng)目部署的三種方案詳解
這篇文章主要介紹了Vue前端項(xiàng)目部署的三種方案,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08
Vue的事件響應(yīng)式進(jìn)度條組件實(shí)例詳解
這篇文章主要介紹了Vue的事件響應(yīng)式進(jìn)度條組件的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-02-02
el-elementUI使用el-date-picker選擇年月
本文主要介紹了el-elementUI使用el-date-picker選擇年月,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-02-02
Element的穿梭框數(shù)據(jù)量大時(shí)點(diǎn)擊全選卡頓的解決方案
本文主要介紹了Element的穿梭框數(shù)據(jù)量大時(shí)點(diǎn)擊全選卡頓的解決方案，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
vue3常用的API使用簡(jiǎn)介
這篇文章主要介紹了vue3常用的API使用簡(jiǎn)介，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
2021-03-03
Vue中Object.defineProperty用法示例
Vue中的Object.defineProperty是一個(gè)比較重要的方法,它是可以定義對(duì)象中屬性的一個(gè)方法,相比于在對(duì)象中直接定義的對(duì)象,它更具有靈活性,本文將通過代碼示例給大家簡(jiǎn)單介紹一下Vue中的Object.defineProperty,需要的朋友可以參考下
2023-08-08
element中el-table中的el-input校驗(yàn)的實(shí)現(xiàn)
本文主要介紹了element中el-table中的el-input校驗(yàn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
關(guān)于el-table表格組件中插槽scope.row的使用方式
這篇文章主要介紹了關(guān)于el-table表格組件中插槽scope.row的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08