vue implémente la fonction cliquer pour développer et cliquer pour réduire

Cette fois, je vais vous présenter l'implémentation de la fonction cliquer pour développer-cliquer pour réduire en vue. Quelles sont les précautions pour implémenter le clic pour développer et cliquer pour. -collapse fonction dans vue Voici un cas pratique, jetons un oeil.

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

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

Utilisez 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 : lors d'une boucle Utilisez directement showList pour fonctionner, affichez l'événement réduit Utilisez directement showAll = !showAll pour contrôler, changez le vrai ou le faux 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 crois que vous l'avez maîtrisé après avoir lu le cas dans Cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Explication détaillée de l'utilisation du mécanisme Vue nextTick

Un résumé des méthodes de transfert de valeur de routage Angular5

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!