vue 便签

以下是一个使用 Vue.js 实现的便签应用程序的基本结构：

<div id="app">
  <header>
    <h1>便签</h1>
    <input v-model="newNote" placeholder="添加新便签...">
    <button @click="addNote">添加</button>
  </header>

  <main>
    <ul>
      <li v-for="(note, index) in notes" :key="index">
        {{ note }}
        <button @click="deleteNote(index)">删除</button>
      </li>
    </ul>
  </main>
</div>

new Vue({
  el: '#app',
  data: {
    notes: [],
    newNote: ''
  },
  methods: {
    addNote() {
      if (this.newNote.trim() !== '') {
        this.notes.push(this.newNote);
        this.newNote = '';
      }
    },
    deleteNote(index) {
      this.notes.splice(index, 1);
    }
  }
});

上述代码中，我们通过 Vue.js 实现了一个简单的便签应用程序。其中，我们使用了 `v-for` 指令来渲染便签列表，并使用 `v-model` 指令来双向绑定输入框和数据模型。我们还使用了 `@click` 事件监听器来处理用户的添加和删除操作。