So verwenden Sie Vue, um „Klicken zum Erweitern“ und „Klicken zum Reduzieren“ zu implementieren

Dieses Mal zeige ich Ihnen, wie Sie mit Vue „Klicken zum Erweitern“ und „Klicken zum Reduzieren“ implementieren Praktischer Fall, werfen wir einen Blick darauf.

Die Schritte zur Installation von

vue werden hier nicht beschrieben. Gehen wir direkt zum Thema Definieren Sie zunächst die Daten in Daten:

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

Verwendung Berechnet verarbeitet Daten:

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:

führt eine Schleife

direkt mit showList durch und zeigt das reduzierte Ereignis direkt mit showAll = !showAll zur Steuerung an falscher Wert dieses Werts

<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, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man mit Vue2.0 die Kamera zum Fotografieren aufruft

Wie man damit umgeht JS in Versionen vor IE9 Speicherverlust

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue, um „Klicken zum Erweitern“ und „Klicken zum Reduzieren“ zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!