用户选择栏目, 把用户选中的栏目信息在下面列表显示出来，再将栏目取消后，列表消失

你可以使用Vue的条件渲染来实现根据用户选中的栏目信息来显示或隐藏列表。以下是一个简单的示例代码：

<template>
  <div>
    <label v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id" @change="updateSelectedItems">
      {{ item.name }}
    </label>

    <div v-if="selectedItems.length > 0">
      <h3>已选栏目：</h3>
      <ul>
        <li v-for="itemId in selectedItems" :key="itemId">
          {{ getItemNameById(itemId) }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '栏目1' },
        { id: 2, name: '栏目2' },
        { id: 3, name: '栏目3' }
      ],
      selectedItems: []
    }
  },
  methods: {
    updateSelectedItems() {
      // 更新选中的数组元素
      this.selectedItems = this.items.filter(item => this.selectedItems.includes(item.id));
    },
    getItemNameById(itemId) {
      // 根据id获取栏目名称
      const item = this.items.find(item => item.id === itemId);
      return item ? item.name : '';
    }
  }
}
</script>

在上面的代码中，你首先定义了一个数组 `items`，其中包含了要显示的栏目选项。然后，你使用`v-for`指令循环遍历数组，并使用`v-model`指令绑定每个复选框的选中状态到`selectedItems`数组。

在`@change`事件处理函数中，你调用`updateSelectedItems`方法来更新选中的数组元素。这个方法通过筛选出`items`数组中与`selectedItems`数组中的id匹配的元素来更新`selectedItems`数组。

在HTML部分，你使用了`v-if`指令来判断`selectedItems`数组的长度是否大于0，如果是，则显示已选栏目的标题和列表，否则隐藏。

在列表部分，你使用了`v-for`指令循环遍历已选栏目的id，并通过调用`getItemNameById`方法来获取栏目名称进行显示。

这样，当用户勾选栏目复选框时，已选栏目的列表会显示出来；当用户取消勾选所有栏目复选框时，列表会消失。

你可以根据自己的需求进行修改和扩展。希望对你有所帮助！