一 开发环境

"vue": "^2.6.10"
"element-ui": "^2.11.1"

二 翻车现场

首先我们来看下要实现的需求,其实就是一个条件渲染

但是当我改变data中的from.status的值时,页面并没有跟随刷新。对应form表单数据我是在mounted钩子函数中获取的

    mounted() {
     this.getDataList()
    },

于是我紧着这百度了这个问题,大致都是以下类似的方案

但是当我按照博客的方式去修改我的问题,并没有效果

三 解决方案

大家对比我截取的第一张图,会发现我在外面增加了 <el-container>标签包裹了我的业务代码,神奇的事情发生了,我的问题解决了

但是我不并不知道element-ui在底层为我做了什么,哈哈

<template>
  <el-container style="height:100%; border: 1px solid #eee;">
    <el-container size="medium" direction="vertical" >

        <div class="hintAlertBox" v-if="form.status == '0'">
          <div class="content">
            <img src="@/assets/img/hint2.png" alt="">
            <div class="hintText"></div>
            <div class="btnArr even">
              <button class="redact" @click="routerToEditor"></button>
              <button @click="routerToPreview"></button>
            </div>
          </div>
        </div>
      <div class="hintAlertBox" v-if="form.status == '1'">
        <div class="content">
          <img src="@/assets/img/hint3.png" alt="">
          <div class="hintText">“<span></span>”<i class="audit">…</i></div>
          <div class="btnArr odd">
            <button @click="routerToPreview"></button>
          </div>
        </div>
      </div>
      </el-container>
  </el-container>
</template>