vue中渲染列表点击显示不同的内容

在Vue中，您可以使用v-for指令来渲染列表，并使用@click指令来添加单击事件处理程序。以下是一个基本示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index" @click="showContent(index)">
        {{ item.title }}
      </li>
    </ul>
    <div v-if="selectedItem !== null">
      {{ items[selectedItem].content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          title: 'Item 1',
          content: 'Content for item 1'
        },
        {
          title: 'Item 2',
          content: 'Content for item 2'
        },
        {
          title: 'Item 3',
          content: 'Content for item 3'
        }
      ],
      selectedItem: null
    }
  },
  methods: {
    showContent(index) {
      this.selectedItem = index
    }
  }
}
</script>

在上面的示例中，我们首先使用v-for指令来渲染列表项。我们还使用@click指令将showContent方法添加为单击事件处理程序。showContent方法接受列表项的索引作为参数，并将其分配给selectedItem属性。

我们还在组件中添加了一个包含所选项目内容的div。我们使用v-if指令来判断是否有所选项目，并使用items[selectedItem].content来显示所选项目的内容。

当用户单击列表项时，showContent方法将更新selectedItem属性的值，从而显示所选项目的内容。

请注意，上面的示例仅供参考。您可以根据您的具体需求进行更改。