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>

效果：