如何使用Vue.js实现一个功能：当用户点击按钮时，在输入框中动态添加新内容并实时显示出来？

在Vue.js中，你可以通过数据绑定和事件处理机制轻松实现这个功能。首先，你需要创建一个Vue实例，并在其中声明一个数组用于存储输入的内容，以及一个模板来展示输入框和按钮。

1. **步骤1：设置Vue实例**
在HTML中引入Vue库，并创建一个新的Vue实例：

<template>
  <div id="app">
    <input v-model="newContent" @keyup.enter="addContent" />
    <button @click="addContent">添加内容</button>
    <ul>
      <li v-for="(item, index) in contentList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newContent: '',
      contentList: [],
    };
  },
  methods: {
    addContent() {
      this.contentList.push(this.newContent);
      this.newContent = '';
    },
  },
};
</script>

2. **步骤2：数据绑定**
`v-model`指令用于双向数据绑定，当你在输入框中输入内容时，`newContent`的数据会自动更新；`v-for`循环遍历`contentList`并在列表中显示每一项。

3. **步骤3：事件处理**
`@keyup.enter`监听键盘回车事件，当用户按下回车键时触发`addContent`方法；`@click`监听按钮点击事件，同样调用`addContent`方法。

现在，每当用户在输入框中输入新内容并按回车，或者点击“添加内容”按钮，新内容就会实时地显示在列表中。这就是在Vue.js中实现动态添加内容的基本流程。