v-if和v-show

╰半夏微凉° 2022-11-27 05:28 23阅读 0赞

v-if和v-show：vue框架中提供了v-if 和 v-show两个指令，用于控制页面DOM结构的显隐性。

一、比较：

1、相同点：均可以实现局部DOM的显示和隐藏。

2、不同点：显示和隐藏的原理不同。v-show隐藏元素的本质是给元素本省添加了display = none这个css属性，其实DOM结构仍存在于页面，可以通过F12查看DOM结构。v-if隐藏元素的本质是不加载DOM结构，不能通过F12查看DOM结构之后再v-if绑定的布尔变量为true时，才添加对应的DOM结构。

3、总结：综上，v-if常用于：

（1）控制DOM加载的顺序：

如果控制显示的DOM用到了某个异步获取的参数，为防止参数还未响应而DOM已加载导致页面无渲染的情况，可以将该DOM添加v-if控制显示并将该参数作为v-if的条件。如控制父子组件的加载顺序：父组件引用了子组件，子组件的生命周期和父组件是一样的，随父组件初始化而初始化，最后随着父组件的销毁而销毁，如果希望改变子组件初始化的顺序，使子组件延迟加载，可以在父组件中加v-if来控制子组件的懒加载。

（2）强制更新子组件：子组件的生命周期和父组件是一样的，如果希望单独更新子组件，常使用v-if来控制子组件的显示。如果涉及页面不更新渲染数据问题，还可以和nextTick函数配合的方法来强制重新渲染：

<Son v-if="sonRefresh"></Son>
     
    data(){
    　　return {
    　　　　sonRefresh: true
    　　}
    }
     
    // 下面这段内容写在父组件需要更新子组件的地方
    this.sonRefresh= false;
    this.$nextTick(() => {
        this.sonRefresh= true;
    });

二、用法举例：

1、v-if以下报错：NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before  改为v-show后问题解决。

2、如父组件四个tab，点击每个tab都有调用同一个子组件，每个tab调用接口获取id把id传给子组件，子组件根据这个id再掉用后端接口初始化页面。如果父组件调用接口还未响应而子组件先初始化了，就会出现页面为空的情况，这时可以用v-if解决，当父组件的id获取到时才加载子组件。这里在子组件的钩子函数中加了一个alert，也可以看出，如果使用v-show，父页面加载时会立即弹出4个alert，内容为空，改成v-if，会在点击tab的时候弹出，并且id有值：

父：

<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="这是tab1" name="tab1">
    		  tab1的描述
              <MyChild v-if="tab1Id"
                :id="tab1Id"
              ></MyChild>
            </el-tab-pane>
            <el-tab-pane label="这是tab2" name="tab2" >
              <MyChild v-show="tab2Id"
                :id="tab2Id"           
              ></MyChild>
            </el-tab-pane>
            <el-tab-pane label="这是tab3" name="tab3">
    		   
              <MyChild v-if="tab3Id"
                :id="tab3Id"
              ></MyChild>
            </el-tab-pane>
            <el-tab-pane label="这是tab4" name="tab4">
    		  按钮
              <MyChild v-if="tab4Id"
                :id="tab4Id"
              ></MyChild>
            </el-tab-pane>
    </el-tabs>
    
    
      data() {
        return {
          activeName: 'tab1',
          //tab1
          tab1Id: '',
          schoolOverviewScene: 1,
          //tab2
          tab2Id: '',
          productOverviewScene: 2,
          //tab3
          tab3Id: '',
          areaOverviewScene: 3,
          //tab4
          tab4Id: '',
          keySchoolScene: 4
        };
      },
     
      created() {
        this.getTab1Id();
      },
    
      methods: {
        handleClick() {
          if (this.activeName === 'tab1') {
            this.getTab1Id();
          } else if (this.activeName === 'tab2') {
            this.getTab2Id();
          } else if (this.activeName === 'tab3') {
            this.getTab3Id();
          } else if (this.activeName === 'tab4') {
            this.getTab4Id();
          }
        },
        getTab1Id() {
          this.$api['user/getMyDatas']({
            roleId: this.roleId,
            scene: this.schoolOverviewScene
          }).then(data => {
            if (data && data.length > 0) {
              this.tab1Id = data[0].reportId;
            }
          });
        },
        getTab2Id() {
          this.$api['user/getMyDatas']({
            roleId: this.roleId,
            scene: this.productOverviewScene
          }).then(data => {
            if (data && data.length > 0) {
              this.tab2Id = data[0].reportId;
            }
          });
        },
    
        getTab3Id() {
          this.$api['user/getMyDatas']({
            roleId: this.roleId,
            scene: this.areaOverviewScene
          }).then(data => {
            if (data && data.length > 0) {
              this.tab3Id = data[0].reportId;
            }
          });
        },
        getTab4Id() {
          this.$api['user/getMyDatas']({
            roleId: this.roleId,
            scene: this.keySchoolScene
          }).then(data => {
            if (data && data.length > 0) {
              this.tab4Id = data[0].reportId;
            }
          });
        },
      }

子：

<template>
      <div id="frame">
        <iframe 
          :id="myData.iframeId"
          v-bind:src="myData.content"
          :style="{width: width, height:height}"
        ></iframe>
      </div>
    </template>
    
    
      props: {
        id: {
          required: true,
          type: Number
        }
      },
      data() {
        return {
          myData:'',
          height: window.innerHeight + 'px',
          width: '100%'
        };
      },
      created() {
        alert(this.id);
      },
      mounted() {
        this.init();
      },
    
      methods: {
    
        init() {
          if (this.id!== '') {
            this.$api['user/getDetailById']({
             id:this.id
            }).then(data => {
      
    		  this.myData.id = this.id+'-'+url;
              }
            });
          }
        }
      }

3、再如：三个文字按钮（使用了面包屑的样式）切换页面，第二和第三个页面需要传递一个参数（异步获取的）给子组件，子组件根据这个参数再次请求后台来初始化页面，为防止该参数还未获取到而子组件已经加载导致初始化的页面为空，这里使用了v-if，同时第三个页面有一个查询按钮，点击按钮需要更新页面显示数据：

父：index.vue

<template>
    <div class="body">
       <div class="header">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item @click.native="swithFirst()">首页</el-breadcrumb-item>
            <el-breadcrumb-item @click.native="swithSecond()">活动管理</el-breadcrumb-item>
            <el-breadcrumb-item @click.native="swithThird()">活动列表</el-breadcrumb-item>
         </el-breadcrumb>
        </div>
    
        <div class="container">
            
            <div>
                <FirstChild v-show="isFirstShow"></FirstChild>
            </div>
    
            
            <div  v-show="isSecondShow">
                 <MyChild 
                v-if="secondId"
                :id="secondId"
               
              ></MyChild>
            </div>
            
            
            <div  v-show="isThirdShow">
                <div class="query-div">
                    <el-button @click="search()" type="primary">搜索</el-button>
                </div>
                 <MyChild 
                v-if="thirdId"
                :id="thirdId"
         
              ></MyChild>
            </div>
        </div>
      </div>
     
    </template>
    
    <script>
    import FirstChild from './children/first-child';
    import MyChild from '@/components/my-child';
    export default {
      name: 'Default',
      data() {
        return {
          isFirstShow: true,
          isSecondShow: false,
          isThirdShow: false,
          roleId: -1,
          //第二个页面
          secondId: '',
          secondScene: 7,
          //
          thirdId: '',
          thirdScene: 8
        };
      },
      methods: {
        swithFirst() {
          this.isFirstShow = true;
          this.isSecondShow = false;
          this.isThirdShow = false;
        },
        swithSecond() {
          if (!this.secondId) {
            this.getSecondId();
          }
          this.isFirstShow = false;
          this.isSecondShow = true;
          this.isThirdShow = false;
        },
        swithThird() {
          if (!this.thirdId) {
            this.getThirdId();
          }
          this.isFirstShow = false;
          this.isSecondShow = false;
          this.isThirdShow = true;
        },
        //获取第二个页面id
        getSecondId() {
          this.$api['user/getMyDatas']({
            roleId: this.roleId,
            scene: this.secondScene
          }).then(data => {
            if (data && data.length > 0) {
              this.secondId = data[0].reportId;
            }
          });
        },
        //获取重点项目达芬奇看板id
        getThirdId() {
          this.$api['user/getMyDatas']({
            roleId: this.roleId,
            scene: this.thirdScene
          }).then(data => {
            if (data && data.length > 0) {
              this.thirdId = data[0].reportId;
            }
          });
        },
        //重新加载
        search() {
          let tem = this.thirdId;
          this.thirdId = '';
          this.$nextTick(() => {
            this.thirdId = tem;
          });
        }
      },
      components: { ProjectOverview, MyChild }
    };
    </script>
    
    <style lang="less" scoped>
    .body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      .container {
      }
    }
    </style>

子1：first-child.vue:

<template>
        <div>总览</div>
    </template>
    <script>
    export default {
      created() {}
    };
    </script>

子2：my-child.vue：

<template>
      <div id="frame">
        <iframe 
          :id="myData.iframeId"
          v-bind:src="myData.content"
          :style="{width: width, height:height}"
        ></iframe>
      </div>
    </template>
     
     
      props: {
        id: {
          required: true,
          type: Number
        }
      },
      data() {
        return {
          myData:'',
          height: window.innerHeight + 'px',
          width: '100%'
        };
      },
      created() {
        alert(this.id);
      },
      mounted() {
        this.init();
      },
     
      methods: {
     
        init() {
          if (this.id!== '') {
            this.$api['user/getDetailById']({
             id:this.id
            }).then(data => {
      
    		  this.myData.id = this.id+'-'+url;
              }
            });
          }
        }
      }