安裝vue的步驟在這里就不進(jìn)行贅述了，下面直接進(jìn)入正題
首先定義一下data里面的數(shù)據(jù)：
data () {
return {
toLearnList:[
'html','css','javascript','java','php' //進(jìn)行顯示的數(shù)據(jù)
],
showAll:false, //標(biāo)記數(shù)據(jù)是否需要完全顯示的屬性
}
}
使用computed對(duì)data進(jìn)行處理：
computed:{
showList:function(){
if(this.showAll == false){ //當(dāng)數(shù)據(jù)不需要完全顯示的時(shí)候
var showList = []; //定義一個(gè)空數(shù)組
if(this.toLearnList.length > 3){ //這里我們先顯示前三個(gè)
for(var i=0;i<3;i++){
showList.push(this.toLearnList[i])
}
}else{
showList = this.toLearnList
}
return showList; //返回當(dāng)前數(shù)組
}else{
return this.toLearnList;
}
},
word:function(){
if(this.showAll == false){ //對(duì)文字進(jìn)行處理
return '展開(kāi)全部'
}else{
return '收起'
}
}
}
template：循環(huán)的時(shí)候直接用showList進(jìn)行操作沸版，顯示收起的事件直接用showAll = !showAll 進(jìn)行控制点晴，改變這個(gè)值的真假
<template>
<div class="hello">
<div v-for='item in showList'>{{item}}</div>
<div @click="showAll = !showAll" class="show-more">{{word}}</div>
</div>
</template>
css: (湊合著來(lái))
image.png
最終效果(請(qǐng)忽略我這難看的樣式)：
點(diǎn)擊前：
image.png
點(diǎn)擊后：
image.png
