vue實現(xiàn)點擊展開點擊收起效果
更新時間：2018年04月27日 11:14:29 作者：<_/>
這篇文章主要介紹了vue實現(xiàn)點擊展開,點擊收起效果，首先我們需要定義data里面的數(shù)據(jù)，使用computed對data進(jìn)行處理,需要的朋友可以參考下
安裝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對data進(jìn)行處理：
computed:{
showList:function(){
if(this.showAll == false){ //當(dāng)數(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; //返回當(dāng)前數(shù)組
}else{
return this.toLearnList;
}
},
word:function(){
if(this.showAll == false){ //對文字進(jìn)行處理
return '點擊展開'
}else{
return '點擊收起'
}
}
}
template：循環(huán)的時候直接用showList進(jìn)行操作，顯示收起的事件直接用showAll = !showAll 進(jìn)行控制，改變這個值的真假
<template>
<div class="hello">
<div v-for='item in showList'>{{item}}</div>
<div @click="showAll = !showAll" class="show-more">{{word}}</div>
</div>
</template>
總結(jié)
以上所述是小編給大家介紹的vue實現(xiàn)點擊展開點擊收起效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程
大家都知道vue.js通過v-on完成事件處理與綁定，但最近使用v-on的時候遇到了一個問題，所以下面這篇文章主要給大家介紹了關(guān)于vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程，需要的朋友可以參考下。2017-07-07
這篇文章主要給大家介紹了關(guān)于如何使用Vue做個簡單的比較兩個數(shù)字大小頁面的相關(guān)資料,實現(xiàn)一個比較兩個數(shù)字大小的頁面，練習(xí)Vue實例的創(chuàng)建、數(shù)據(jù)綁定和事件監(jiān)聽方法,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)大屏頁面的屏幕自適應(yīng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue 導(dǎo)航錨點_點擊平滑滾動,導(dǎo)航欄對應(yīng)變化詳解
這篇文章主要介紹了vue 導(dǎo)航錨點_點擊平滑滾動,導(dǎo)航欄對應(yīng)變化詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue實例中生命周期created和mounted的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于Vue實例中生命周期created和mounted區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
vuecli+AXdownload下載組件封裝?+css3下載懸浮球動畫效果
當(dāng)觸發(fā)下載功能的時候,會觸發(fā)一個下載動畫,下載懸浮球會自動彈出,并且閃爍提示有新的下載任務(wù)直到下載任務(wù)完場提示,接下來通過本文介紹vuecli+AXdownload下載組件封裝?+css3下載懸浮球動畫效果,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了基于vue開發(fā)的在線付費課程應(yīng)用過程，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了Vue中對組件二開解決思路以及方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-04-04
利用vue-router實現(xiàn)二級菜單內(nèi)容轉(zhuǎn)換
這篇文章主要介紹了如何利用vue-router實現(xiàn)二級菜單內(nèi)容轉(zhuǎn)換,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了Vue或者React項目配置@路徑別名及智能提示方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10