vue展开收起

默认显示展开按钮,点击展开显示全部数据,展开按钮变成收起.

使用计算属性computed判断数组个数实现效果

先看一下效果图

HTML代码

<div id="app">
    <div>
	   <div v-for='item in list'>{{item}}</div>
	   <button @click="open" v-if="flag == false">展开</button>
	   <button @click="open" v-else>收起</button>
    </div>
</div>

JS代码

var vm = new Vue({
	el: '#app',
	data() {
		return {
			box: ['中国', '美国', '俄罗斯', '英国', '法国'],
			flag: false,
		}
	},
	computed: {
		list() {
			if (this.flag == false) {
				var list = [];
				if (this.box.length > 3) {
					for (var i = 0; i < 3; i++) {
						list.push(this.box[i])
					}
				} else {
					list = this.box
				}
				return list;
			} else {
				return this.box;
			}
		}
	},
	methods: {
		open() {
			this.flag = !this.flag
		}
	}
})

大功告成!