vue implementiert die Funktion „Klicken zum Erweitern' und „Klicken zum Reduzieren'.

Dieses Mal werde ich Ihnen die Implementierung der Click-to-Expand-Click-to-Collapse-Funktion in Vue vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung der Click-to-Expand- und Click-to-Funktion? -collapse-Funktion in Vue. Hier sind die praktischen Fälle, schauen wir uns das an.

Definieren Sie zunächst die Daten in den Daten:

data () {
  return {
   toLearnList:[
    'html','css','javascript','java','php'  //进行显示的数据
   ],
   showAll:false, 　　　　　　　　　　　　　　　　//标记数据是否需要完全显示的属性
  }
 }

Verwenden Sie berechnet, um die Daten zu verarbeiten:

computed:{
  showList:function(){
   if(this.showAll == false){          //当数据不需要完全显示的时候
    var showList = [];　　　　　　　　　　　　　　　 //定义一个空数组
    if(this.toLearnList.length > 3){　　　　　　　//这里我们先显示前三个
     for(var i=0;i<3;i++){
      showList.push(this.toLearnList[i])
     }
    }else{
     showList = this.toLearnList
    }
    return showList;　　　　　　　　　　　　　　　　 //返回当前数组
   }else{
    return this.toLearnList;
   }
  },
  word:function(){
   if(this.showAll == false){　　　　　　　　　　　//对文字进行处理
    return &#39;点击展开&#39;
   }else{
    return &#39;点击收起&#39;
   }
  }
 }

Vorlage: Verwenden Sie showList direkt beim Schleifen Operation, Zeigen Sie das reduzierte Ereignis an.Verwenden Sie direkt showAll = !showAll, um den wahren oder falschen Wert dieses Werts zu steuern und zu ändern.

<template>
 <p class="hello">
   <p v-for=&#39;item in showList&#39;>{{item}}</p>
   <p @click="showAll = !showAll" class="show-more">{{word}}</p>
 </p>
</template>

Ich glaube, Sie beherrschen die Methode bitte, nachdem Sie den Fall in diesem Artikel gelesen haben Kommen Sie für mehr Spannendes. Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung des Vue nextTick-Mechanismus

Eine Zusammenfassung der Angular5-Routing-Wertübertragungsmethoden

Das obige ist der detaillierte Inhalt vonvue implementiert die Funktion „Klicken zum Erweitern' und „Klicken zum Reduzieren'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!