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

Question

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

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

AJAX 在另一个文件中。

Answer 1

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

使用 v-show：

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

使用 v-if：

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

您可以设置这些data变量showComp1，showComp2其他取决于 AJAX 调用的响应，取决于将在视图中呈现哪些相应的组件。

v-if vs v-show

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

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

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

一般来说，v-if 的切换成本较高，而 v-show 的初始渲染成本较高。因此，如果您需要经常切换某些内容，则首选 v-show，如果条件不太可能在运行时更改，则首选 v-if。