实现单击一个按钮后，切换盒子的展开和收起状态
!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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/147483.html
