Question

我有一些组件。在jquery AJAX请求之后，我将显示一个特定的组件。那是否有功能？

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

AJAX在另一个文件中。

Answer 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 if if   条件不太可能在运行时改变。

Answer 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/

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

2 个答案: