v-show/v-if is
used to show or hide elements, v-show is realized through display, v-if is recreated after each deletion, similar to angular.
Here we use v-show as an example, click the button to realize the list Show and hide, and change the text
code on the button :
<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>
effect:
