Vue | 显示切换（v-if与v-show,display,visibility与opacity）

若有疑问，欢迎评论，我会尽快回复。

致读者（选读）

有些朋友是在搜索“v-show实现tab页切换”等需求时，访问到本文的。
通过改变CSS/DOM切换的思路可行，但繁琐且存在缺陷，可能会遇到页面走样，与生命周期不协调，传值麻烦等问题。
在现代前端开发中，针对tab切换类需求，更建议使用前端路由vue-router或动态组件 v-bind:is来实现。
vue中的显示切换更适用于实现静态内容切换，而不适用于复杂业务组件的切换。

显示切换

在Vue中，实现显示切换，有以下几种手段：

1. 使用v-if指令
2. 使用v-show指令
3. 动态绑定display
4. 动态绑定visibility
5. 动态绑定opacity

下面将通过案例对比它们的异同。

1.动绑display

动态绑定display，通过添加或删除“display：none”属性实现显示切换。
示例：
我们对.middle节点动态绑定display属性；
同时为.bedroom节点设置样式display: block，测试重写后代节点display属性的效果

<template>
  <div class="hello">
    <div class="top">3楼</div>
    <div class="middle" :style="display">
      <div class="bedroom room">2楼卧室</div>
      <div class="bathroom room">2楼洗手间</div>
    </div>
    <div class="bottom">Floor 3</div>
    <input type="button" @click="toggle()" value="切换">
  </div>
</template>

<script>
export default {
    
  name: "HelloWorld",
  data() {
    
    return {
    
      display: ""
    };
  },
  methods: {
    
    toggle() {
    
      if (this.display === "display:none"