Vue（10）v-show和v-if控制显示隐藏

v-show/v-if
用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建，与angular中类似
这里用v-show作为例子，点击按钮实现列表的显示隐藏，并且更改按钮上的文字
代码：

<template>
	<div id="testa">
		{{name}}
		<br />
		<button id="a" @click="change()">{{btnText}}</button>
		<ul>
			<li id="b" v-for="(v,k) in name" :key="k" v-show="isshow">{{k}}  {{v}}</li>
		</ul>
		<br />
	</div>
</template>

<script>
	export default {
		name: 'test',
		data() {
			return {
				name: [2,3,56,87,45,21,35,12],
				isshow:true,
				btnText:"隐藏",
				i:0
			};
		},
		methods:{
			change(){
				this.isshow=!this.isshow;
				this.i++;
				this.i%2==0?this.btnText="隐藏":this.btnText="显示"
			}
		}
	};
</script>
<style>
	#a{
		width: 100px;
		height: 50px;
	}
	#b{
		cursor: pointer;
		background-color: rgba(0,0,0,0.6);
		color: white;
	}
</style>

效果：