在满足条件后应呈现页面加载时出现条件呈现的类答案

【问题标题】：Class with conditional rendering appearing on page load when it should be rendering after conditions are met在满足条件后应呈现页面加载时出现条件呈现的类
【发布时间】：2021-12-11 06:45:40
【问题描述】：

我试图在页面加载时隐藏某个类。前两个文本不会出现在页面加载时，但不知何故，第三个文本会在页面加载时闪烁，但由于满足其他类的其他条件，它会在几秒钟后消失。我希望它在页面加载时被隐藏，只有在满足 v-else-if 条件时才会出现。

这就是我的代码的样子：

    <div class="row">
      <div class="cxs12" v-if="this.result1 !== this.result2">
        <p>
          text 1
        </p>
      </div>
      <div class="cxs12" v-else-if="this.result">
        <p>
          text 2
        </p>
      </div>
      <div class="cxs12" id="unavailable" v-else-if="this.result === undefined">
        <p>
          text 3
        </p>
      </div>
    </div>

this.result 是 API 调用的返回值。我已经尝试在模板和 CSS 上添加v-cloak，但不幸的是它不起作用。请注意，我使用的是 Typescript，而不是 Vue.js。

知道我能做些什么来解决这个问题吗？

【问题讨论】：

标签： javascript html css typescript vue.js

【解决方案1】：

您可以尝试在row 上设置另一个条件，如果我理解正确的话，可能类似于以下 sn-p：

new Vue({
  el: '#demo',
  data() {
    return {
      result: undefined,
      result1: '',
      result2: '',
      loading: false
    }
  },
  methods: {
    apiCall() {
      this.loading = true
      setTimeout(()=> {
        this.result = 1
        this.loading = false
      },2000)
    }
  },
  mounted() {
    this.apiCall()
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="row" v-if="!loading">
      <div class="cxs12" v-if="this.result1 !== this.result2">
        <p>
          text 1
        </p>
      </div>
      <div class="cxs12" v-else-if="this.result">
        <p>
          text 2
        </p>
      </div>
      <div class="cxs12" id="unavailable" v-else-if="this.result === undefined">
        <p>
          text 3
        </p>
      </div>
    </div>
</div>

【讨论】：