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>
效果: