用element写一个忘备录功能 并且打上注释

<template>
  <div>
    <!-- 标题 -->
    <h1>备忘录</h1>
    <!-- 输入框和添加按钮 -->
    <el-input v-model="inputValue" placeholder="请输入备忘内容"></el-input>
    <el-button type="primary" @click="addMemo">添加</el-button>
    <!-- 备忘列表 -->
    <el-card v-for="(memo, index) in memoList" :key="index" style="margin-top: 10px">
      {{ memo }}
      <el-button type="danger" size="small" @click="deleteMemo(index)">删除</el-button>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: "", // 输入框值
      memoList: [] // 备忘列表
    };
  },
  methods: {
    // 添加备忘
    addMemo() {
      if (this.inputValue.trim() === "") {
        // 输入框为空，不做处理
        return;
      }
      this.memoList.push(this.inputValue); // 将输入框的值添加到备忘列表中
      this.inputValue = ""; // 清空输入框
    },
    // 删除备忘
    deleteMemo(index) {
      this.memoList.splice(index, 1); // 在备忘列表中删除指定位置的备忘
    }
  }
};
</script>