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 的条件渲染，特别是v-if指令。

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

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

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