需求實現(xiàn)的效果圖如下所示：
點擊前
點擊后
具體實現(xiàn)：
template：循環(huán)的時候直接用showList進行操作巫延，顯示收起的事件直接用showAll = !showAll 進行控制米者，改變這個值的真假
<template>
<div class="hello">
<div v-for='item in showList'>{{item}}</div>
<div @click="showAll = !showAll" class="show-more">{{word}}</div>
</div>
</template>
定義一下data里面的數(shù)據(jù)：
data () {
return {
toLearnList:[
'html','css','javascript','java','php' //進行顯示的數(shù)據(jù)
],
showAll:false //標記數(shù)據(jù)是否需要完全顯示的屬性
}
},
使用computed對data進行處理：
computed:{
showList:function(){
if(this.showAll == false){ //當數(shù)據(jù)不需要完全顯示的時候
var showList = []; //定義一個空數(shù)組
if(this.toLearnList.length > 3){ //這里我們先顯示前三個
for(var i=0;i<3;i++){
showList.push(this.toLearnList[i])
}
}else{
showList = this.toLearnList
}
return showList; //返回當前數(shù)組
}else{
return this.toLearnList;
}
},
word:function(){
if(this.showAll == false){ //對文字進行處理
return '展開全部'
}else{
return '收起'
}
}
}
css:（隨便寫的）
<style scoped>
.show-more{
cursor: pointer;
color:red;
}
</style>
