使用vue实现数据展开和折叠的功能

			

				
				

				{{item.label}}
					

						

							{{items.label}}
							

								

								{{itemx.label}}
								
							
						
					
				
			
		

new Vue({
				el: '#box',
				data: {
					list: [{
						id: 1,
						label: '一级 1',
						children: [{
							id: 4,
							label: '二级 1-1',
							children: [{
								id: 9,
								label: '三级 1-1-1'
							}, {
								id: 10,
								label: '三级 1-1-2'
							}]
						}]
					}, {
						id: 2,
						label: '一级 2',
						children: [{
							id: 5,
							label: '二级 2-1'
						}, {
							id: 6,
							label: '二级 2-2'
						}]
					}, {
						id: 3,
						label: '一级 3',
						children: [{
							id: 7,
							label: '二级 3-1'
						}, {
							id: 8,
							label: '二级 3-2'
						}]
					}],
					bool: [] //用数组来接受传过来的值用于判断
				},
				methods: {
					clk(id) {
						if (this.bool.indexOf(id) == -1) {
							this.bool.push(id) //隐藏
						} else {
							this.bool.pop(id) //显示
						}
					}
				}
			})

事件修饰符

    .stop阻止事件冒泡

    .prevent阻止默认行为 

     .self是当前元素自身时触发

     .once事件将只会触发一次

    .passive立即触发浏览器默认行为，运行更流畅

    .navigate()触发到底层组件的事件

Vue.set( , ,)参数1操作的对象，参数2添加的属性，参数3需要添加的val值

以上效果图如下：