Vue实现记事本小功能

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

由于事情繁多，我们有的时候可能会忘记某些时间点需要干的事，今天我来教大家写一个记事本的小功能，记录我们每天需要做的事以免忘记

这里我们需要做一个文本域框，在加一个添加按钮，添加按钮绑定一个方法，用于往笔记列表中添加我们需要记录的数据，在写一个显示我们添加笔记的列表，列表显示的是我们添加的内容和添加内容的时间以及删除按钮，删除按钮绑定一个方法，用于删除我们当前记录的列表项

<div>
      <textarea
        name=""
        id=""
        cols="30"
        rows="10"
        v-model="recordVal"
      ></textarea>
      <button @click="addRecord">保存</button>
    </div>
        <!-- 笔记列表-->
    <ul>
      <li v-for="(item, index) in recordList" :key="index">
        <p>内容:{{ item.content }}</p>
        <div>记录时间:{{item.time}}</div>
   <button @click="removeRecord(item)">删除</button>
      </li>
    </ul>

我们再给笔记列表设置一些样式，使他们能够显示在一行中

ul li {
  width: 600px;
  display: flex;
  align-items: center;
  p {
    width: 200px;

overflow: auto;
word-wrap:break-word;
word-break:break-all;
 
  }
  div{
    margin: 0 10px;
  }
}

定义两个数据，一个是文本域输入的数据，一个是笔记列表，用于存储记录我们记录的信息

  data() {
    return {
      //笔记内容
      recordVal: "",
      // 笔记列表
      recordList: [],
    };
  },

我们在定义一些方法

//添加笔记的方法
 addRecord() {
 //获取到文本域中输入的值
      let value = this.recordVal.trim();
      //判断文本域中的值是否为空，为空则给出对应的提示且退出
      if (!value) {
        alert("值不能为空");
        return;
      }
      //把当前文本域中的内容传递进去，使得能够产生出新的数据
      let HTMLSTR = this.mould(value);
      //将新的数据添加到笔记列表中
      this.recordList.push(HTMLSTR);
      //将文本域中的值置空
      this.recordVal=''
    },
    //数据模板产生函数
    mould(content) {
    //接受文本域的值，产生出笔记内容和记录时间
      return {
        content,
        time: this.handleTime(),
      };
    },
   //获取当前时间并拼接好对应的格式返回出去
    handleTime(str = "年月日::") {
      // 处理补零
      const getTime = (str) => {
        return str.toString().padStart(2, 0);
      };
      // 获取当前时间或者是传入的时间
      const T = new Date();
      // 获取年
      const Y = T.getFullYear();
      // 获取月
      const M = getTime(T.getMonth() + 1);
      // 获取日
      const D = getTime(T.getDate());
      // 获取时
      const H = getTime(T.getHours());
      // 获取分
      const B = getTime(T.getMinutes());
      // 获取秒
      const S = getTime(T.getSeconds());
      return `${Y}${str[0]}${M}${str[1]}${D}${
        str[2] ? str[2] + " " : str[2]
      }${H}${str[3]}${B}${str[4]}${S}`;
    },
//删除笔记项，接收一个参数实参为当前笔记项
    removeRecord(item) {
    //我们利用过滤器方法进行对比当前笔记项和比例列表中的那些项不相等，将不相等的项返回出去保存在笔记列表中
      this.recordList = this.recordList.filter((R) => R!= item);
    },

坚持努力，无惧未来！