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 。