Vue.js:仅在用户单击按钮时加载组件

Question

我的代码看起来像下面的代码。我如何设置它，使组件“dataPart1”和"dataPart2“不会加载，除非用户单击按钮查看数据?换句话说，我不希望数据自动显示，而是只有当用户选择通过按钮单击选项查看它时才会加载。

var app = new Vue({
  el: '#data',
  data: {
    show: true,
    something: true,
  },
  components: {
    dataPart1,
    dataPart2
  },
  ...other stuff...
  }
});

Answer 1

为了有条件地显示模板中的内容(文本、html、组件等)，我们可以使用Vue.js的conditional rendering，特别是v-if指令。

简要说明:我们可以根据组件中定义的某些变量来显示内容。并在某些事件上改变该变量的值，例如按钮点击。

请看一下CodeSandbox上的例子，在点击按钮时有条件地加载两个组件。

在App.vue文件中，我们有两个按钮，它们在单击时触发处理程序，如果相应的值为true，则显示组件的。

​

​