vue.js显示jquery后的组件ajax

Question

我有一些组件。 jQuery的AJAX请求后，我会显示一个特定的组件。有没有这个功能？

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

AJAX在另一个文件中。

Answer 1

您可以使用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/

Answer 2

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

使用V-显示：

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

您可以将这些data变量showComp1，showComp2和其他依赖于AJAX的响应：使用V-如果

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

调用，具体取决于哪些相应的组件将在视图中呈现。

---

v-if vs v-show

V-如果是“真正的”有条件的渲染，因为它确保事件 听众和条件块内的子组件是 妥善销毁和切换过程中重新创建。

V-如果也懒： 如果条件是假的初始渲染，它不会做任何事情 - 条件块将不会被渲染，直到条件变为 真正的第一次。

相比之下，v-show更简单 - 无论初始条件如何，总是呈现 元素，只需简单的基于CSS的 切换。

一般来说，v-if具有较高的切换成本 ，而v-show具有较高的初始成本。因此，如果您需要经常切换某些内容，并且倾向于v-如果 条件在运行时不太可能发生更改，那么首选v-show 。