SOURCE

var vm = new Vue({
  el: '#app111',
  data: {
    message: 'delect',
		items:
[{
			value: "110101",
			text: "东城区"
		}, {
			value: "110102",
			text: "西城区"
		}, {
			value: "110103",
			text: "崇文区"
		}, {
			value: "110104",
			text: "宣武区"
		}, {
			value: "110105",
			text: "朝阳区"
		}, {
			value: "110106",
			text: "丰台区"
		}, {
			value: "110107",
			text: "石景山区"
		}, {
			value: "110108",
			text: "海淀区"
		}, {
			value: "110109",
			text: "门头沟区"
		}, {
			value: "110111",
			text: "房山区"
		}, {
			value: "110112",
			text: "通州区"
		}, {
			value: "110113",
			text: "顺义区"
		}, {
			value: "110114",
			text: "昌平区"
		}, {
			value: "110115",
			text: "大兴区"
		}, {
			value: "110116",
			text: "怀柔区"
		}, {
			value: "110117",
			text: "平谷区"
		}, {
			value: "110228",
			text: "密云县"
		}, {
			value: "110229",
			text: "延庆县"
		}, {
			value: "110230",
			text: "其它区"
	}]

				
  },
	methods: {
	  del:function(e){
			this.items.splice(e,1)
			//alert(e);
		}
	}
})

<div id="app111">
  <transition-group name="list" tag="div">
	  <h3 v-for="(aaa,index) in items" v-bind:key="aaa" class="list-item">
		  {{aaa.text}}-{{index}}
	    <button @click='del(index)'>{{ message }}</button>
	  </h3>
	</transition-group>
</div>

.list-item {
  transition: all 1s;
 /* display: inline-block;
  margin-right: 10px;
	*/
}
.list-enter, .list-leave-active {
  opacity: 0;
  transform: translateY(30px);
}
.list-leave-active {
  position: absolute;
}