大致思路
arr是数据列表的数组,showArr是需要显示数据的数组
需要展示的数据用v-if='showArr.indexOf(index)!==-1'来控制,有就显示,没有就隐藏
showArr默认为空,点击展示/隐藏,判断showArr中是否有此数据,有就删除(隐藏功能),没有就添加(显示功能)
<html>
<head>
<title>VueJs 在线编辑器</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
</script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<div v-for='(item,index) in arr'>
<button class='d1' @click='show(index)'>{{showArr.indexOf(index)===-1?'展开':'隐藏'}}</button>
<div class='d2' v-show='showArr.indexOf(index)!==-1'>{{index}}</div>
</div>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
arr:[1,2,3,4],
showArr:[]
},
methods:{
show(index){
let x = this.showArr.indexOf(index)
x==-1?this.showArr.push(index):this.showArr.splice(x,1)
}
}
});
</script>
</body>
</html>