vue.js 在 jquery ajax 之后显示组件答案

【问题标题】：vue.js show component after jquery ajaxvue.js 在 jquery ajax 之后显示组件
【发布时间】：2016-11-26 21:30:30
【问题描述】：

我有一些组件。在 jquery AJAX 请求之后，我会显示一个特定的组件。有这样的功能吗？

<comp1 :page="page1"></comp1>
<comp2 :page="page2"></comp1>
<comp3 :page="page3"></comp1>

AJAX 在另一个文件中。

【问题讨论】：

请添加更多详细信息，说明需要做什么，到目前为止您尝试了什么。

标签： vue.js

【解决方案1】：

您可以在v-if 或v-show 指令的帮助下使用Conditional Rendering：

使用 v-show：

<comp1 :page="page1" v-show="showComp1"></comp1>

使用 v-if:

<comp1 :page="page1" v-if="showComp1"></comp1>

你可以根据AJAX调用的响应来设置这些data变量showComp1、showComp2等，这取决于视图中会渲染哪些对应的组件。

v-if vs v-show

v-if 是“真实的”条件渲染，因为它确保事件条件块内的侦听器和子组件是在切换期间正确销毁和重新创建。

v-if 也是惰性的：如果在初始渲染时条件为假，它不会做任何事情 - 在条件变为之前，条件块不会被渲染第一次如此。

相比之下，v-show 要简单得多—— 无论初始条件如何，元素总是被渲染，只有简单的基于 CSS 的切换。

一般来说，v-if 有更高的切换成本，而 v-show 具有更高的初始渲染成本。所以更喜欢v-show 如果您需要经常切换某些东西，并且更喜欢 v-if 如果条件不太可能在运行时改变。

【讨论】：

v-if 属性看起来像 v-if="page=='start'"。这是正确的还是它意味着别的什么？
@timmy v-if 接受一个变量，它评估为真或假并决定是否渲染它。 v-if="page=='start'" 也是有效的，如果page的值为"start"，就会渲染对应的元素。

【解决方案2】：

您可以为此使用v-show，并将每个组件绑定到存储在data 中的标志：

new Vue({
  el: "#app",
  methods: {
     makeCall(){
        this.$http.get('foo')
          .then(response => {
             // after ajax call set comp1 show flag to true
             this.show.comp1 = true;
         });
     }
  },
  data: {
    show: {
      comp1: false,
      comp2: true,
      comp3: false
    }
  }
});

然后像这样用v-show 绑定它们：

  <comp1 v-show="show.comp1"></comp1>
  <comp2 v-show="show.comp2"></comp2>
  <comp3 v-show="show.comp3"></comp3>

这里有一个 JSFiddle 向您展示它是如何工作的：https://jsfiddle.net/wp5tfe2e/

【讨论】：