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文件中，我们有2个按钮，它们会在单击时触发处理程序，并显示组件的对应值是否为true。