Comment utiliser vue pour implémenter cliquez pour développer et cliquez pour réduire

Cette fois, je vais vous montrer comment utiliser vue pour implémenter cliquer pour développer et cliquer pour réduire. Quelles sont les précautions pour utiliser vue pour implémenter cliquer pour développer et cliquer pour réduire. cas pratique, jetons un coup d'oeil.

Les étapes pour installer vue ne seront pas décrites ici Passons directement au sujet

Définissez d'abord les données dans data :

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

Utiliser calculé pour traiter les données :

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;
   }
  }
 }

modèle : utiliser directement showList lors de la boucle pour afficher l'événement réduit utiliser directement showAll = showAll pour contrôler et modifier la valeur vraie ou fausse de cette valeur

<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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment utiliser Vue2.0 pour appeler l'appareil photo pour prendre des photos

Comment gérer JS dans les versions antérieures à IE9 Fuite de mémoire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!