用vue便签模板文件编写逻辑

在Vue.js中，便签模板文件通常会结合HTML、CSS和Vue组件语法来创建可复用的模块化结构。以下是一个简单的便签模板示例：

<!--.vue文件 (例如 notes.vue)-->
<template>
  <div class="note-container">
    <ul v-for="(note, index) in notes" :key="index">
      <li class="note-item">
        <input type="text" v-model="note.title" placeholder="请输入标题" />
        <p>{{ note.content }}</p>
        <button @click="deleteNote(index)">删除</button>
      </li>
    </ul>
    <input type="text" v-model="newNoteTitle" placeholder="新建便签" @keyup.enter="addNote()" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      notes: [], // 存储便签数组
      newNoteTitle: '', // 新建便签的输入框值
    };
  },
  methods: {
    addNote() {
      if (this.newNoteTitle.trim()) { // 验证内容是否为空
        this.notes.push({ title: this.newNoteTitle, content: '' });
        this.newNoteTitle = ''; // 清空输入框
      }
    },
    deleteNote(index) {
      this.notes.splice(index, 1); // 从数组中移除指定索引的元素
    },
  },
};
</script>

<style scoped>
.note-container {
  /* 样式定义 */
}
.note-item {
  /* 单个便签样式 */
}
</style>

在这个例子中，`<template>`部分展示了视图层，通过`v-for`循环遍历数据并展示每个便签；`<script>`部分包含了数据（如`notes`数组）和相关的业务逻辑（添加和删除便签）；`<style>`则用于定义组件的样式。