vue实现单击一个按钮后，切换盒子的展开和收起状态
source link: https://blog.51cto.com/u_15702547/5446069
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
实现单击一个按钮后，切换盒子的展开和收起状态
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div>
<div v-for='item in showList'>{{item}}</div>
<button @click="showAll = !showAll" class="status">{{flag}}</button>
</div>
</div>
<!-- 一开始只显示4个数据，点击展开显示全部 -->
<script type = "text/javascript">
var vm = new Vue({
el:'#app',
data() {
return {
fruitList:[
'首页','电影','动漫','电视剧','更多' // 进行显示的数据
],
showAll:false, // 标记数据是否需要完全显示的属性
}
},
computed:{
showList:function(){
if(this.showAll == false){
var showList = [];
if(this.fruitList.length > 4){ // 一开始显示前4个数据
for(var i=0;i<4;i++){
showList.push(this.fruitList[i])
}
}else{
showList = this.fruitList
}
return showList;
}
else{
return this.fruitList;
}
},
flag:function(){
if(this.showAll == false){
return '单击展开'
}
else{
return '单击收起'
}
}
}
})
</script>
</body>
</html>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK