Vue2 列表展示及实时更新示例

<div id="app">
  <input type="text" v-model="newItem" @keyup.enter="addItem">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>
<script>
new Vue({
  el: "#app",
  data() {
    return {
      newItem: "",
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" }
      ]
    };
  },
  methods: {
    addItem() {
      if (this.newItem !== "") {
        this.items.push({
          id: this.items.length + 1,
          name: this.newItem
        });
        this.newItem = "";
      }
    }
  }
});
</script>
<p>在上面的示例中，我们使用 Vue 实例的<code>data</code>选项来定义我们的数据。<code>newItem</code>用于存储用户输入的新项目，<code>items</code>是一个包含初始项目的数组。</p>
<p>在 HTML 中，我们使用<code>v-model</code>指令将输入框的值绑定到<code>newItem</code>变量上。我们还使用了<code>@keyup.enter</code>事件监听器来捕获用户按下回车键并调用<code>addItem</code>方法。</p>
<p><code>v-for</code>指令用于循环遍历<code>items</code>数组，并为每个项目创建一个列表项。我们使用<code>:key</code>来为每个列表项提供一个唯一的标识符。</p>
<p>在 Vue 实例的<code>methods</code>选项中，我们定义了<code>addItem</code>方法，用于将新项目添加到<code>items</code>数组中。我们首先检查<code>newItem</code>是否为空，然后使用<code>push</code>方法向<code>items</code>数组中添加新项目。最后，我们将<code>newItem</code>重置为空字符串，以清空输入框中的内容。</p>