if判断—点击显示，另一个隐藏功能

Question

请问，点显示，另一个隐藏。 这里这个if判断该怎么写呢！

<template>
  <div class="NavBar_Item" :class="{ activ1: ys }" @click="NavBarItemClick()">
    <slot name="NavBarText"></slot>
  </div>
</template>

<script>
export default {
  name: "NavBarItem",
  props: {
    path: String
  },
  data() {
    return {
      ys: false,
    }
  },
  methods: {
    NavBarItemClick() {
      this.$router.replace(this.path).catch((err) => err)

          if(this.ys){
            this.ys = !this.ys
          }
    }
  }
}
</script>

<style scoped>
.activ1 {
  background-color: #ddd;
  color: black;
}
</style>

Answer 1

<template>
  <button @click="isShowBlog = !isShowBlog">
    {{ isShowBlog ? '博客' : '写博客' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isShowBlog: true,
    };
  },
};
</script>