我想用vue写一个点击1，下面显示一个内容，点击，下面显示新内容

在 Vue.js 中，你可以使用模板、事件绑定以及数据驱动的方式轻松实现这个功能。首先，你需要创建一个Vue实例，并在其中定义一个数组或者对象存储你要展示的内容。然后，你可以在 HTML 上创建一个按钮并绑定 click 事件，每次点击时更新显示的内容。

这是一个简单的例子：

<template>
  <div id="app">
    <button @click="toggleContent">点击显示内容</button>
    <p v-if="showingContent">{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showingContent: false,
      // 这里可以换成一个数组或对象，存储你的内容
      content: '默认内容',
      // 假设你有一个数组，动态内容示例
      dynamicContent: ['新内容1', '新内容2']
    };
  },
  methods: {
    toggleContent() {
      this.showingContent = !this.showingContent;
      if (this.showingContent) {
        // 如果你想轮换显示数组中的内容，可以这样做
        this.content = this.dynamicContent[this.contentIndex];
        this.contentIndex = (this.contentIndex + 1) % this.dynamicContent.length;
      }
    },
    // 初始化时设置内容索引
    mounted() {
      this.contentIndex = 0; // 如果你的动态内容是一个数组，这里可以初始化索引
    }
  }
};
</script>

在这个例子中，当你点击按钮时，`toggleContent` 方法会被触发，它会切换 `showingContent` 的值，进而切换 `<p>` 元素的 `v-if` 条件。如果设置了动态内容数组，每次切换时还会从数组中取出下一个内容显示。

注意：为了演示方便，这里假设 `dynamicContent` 是一个数组，你可以根据实际需求修改内容结构。如果你只有一个固定的内容字符串，可以直接将其放在 `content` 数据字段中。