备忘录 vue实现 添加修改删除

一. 效果图

二. 具体功能实现

1. 使用 Date对象 获取当前时间
   
2. 使用 push方法 为列表添加数据
   
3. 使用 splice方法 删除数据
   
4. 修改数据的同时把整条记录删除
   

三. 整体代码

<template>
  <div id="app">
      <header>
        <h2 class="title">备忘录</h2>
        <h4 class="time">{{now}}</h4>
      </header>
      <section>
        <textarea v-model="text" class="text" placeholder="今天天气真好！"></textarea>
        <button @click="textComplete" class="completion">完成</button>
      </section>
      <ul class="nav">
        <li v-for="(node,index) of textNodes" :key="index">
         <div class="content">
            <p>{{node.content}}</p>
            <p >{{node.date}}</p>
         </div>
         <div class="btn">
           <button @click="textDelete(index)">删除</button><!--删除数据-->
           <button @click="textPut(index)">修改</button> <!--修改数据-->
         </div>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  data(){
    return{
      textNodes:[
        {content:"今天完成了200个单词",date:"2020/5/19 星期二"},
        {content:"今天学习了vue",date:"2020/5/18 星期一"},
        {content:"今天学习了node.js",date:"2020/5/17 星期日"}
      ],
      now:this.getTime(),
      text:""
    }
  },
  methods:{
    //计算当前时间
   getTime(){  
     var now =new Date();
     var arr=["日","一","二","三","四","五","六"];
    var day=now.getDay();//得到的是数字,然我们想要的是星期几
    var dayTime=arr[day];
    return now.toLocaleDateString()+"  "+"星期"+dayTime;
   },
   textComplete(){ 
     //为列表添加数据
       this.textNodes.push({content:this.text,date:this.now});
       this.text='';
   },
   //删除数据
   textDelete(index){ 
     this.textNodes.splice(index,1);
   },
   //修改数据
   textPut(index){   
    this.text=this.textNodes[index].content;//先获取要修改的值
    this.textNodes.splice(index,1);//同时把整条记录都删去
    return this.text;
   }
  }
}
</script>

<style scoped>
*{
  margin:0px;
  padding:0px;
}
#app{
  width:360px;
  border:1px solid #f1f1f1;
  box-shadow:-1px -1px 3px #eee;
  margin:50px auto;
  background-color:pink;
}
header{
  display:flex;
  justify-content: space-between;/**两端对齐 */
}
header .title ,.time{
  color:#f7f710;
}
header .time{
  font-size:16px;
  align-self: flex-end; /**底端对齐*/
}
section{
  position:relative;
  width:360px;
  height:300px;
  border-bottom:1px solid #ccc;
}
section .text{
  box-sizing:border-box;
  width:360px;
  height:300px;
  border:none;
  outline:none;
  color:#aaa;
  font-size:16px;
  padding:10px 0px 0px 6px; 
  background-color:rgb(253, 226, 231);
}
textarea::-webkit-input-placeholder{
   color:#333;
   font-size:16px;
}
section .completion{
  position:absolute;
  right:8px;
  bottom:5px;
  width:40px;
  height:30px;
  background-color:#f7f710;
  border-radius:4px;
  border:none;
  outline:none;
}
.nav li{
  display:flex;
  list-style: none;
  width:360px;
  border-bottom:1px solid #fff;
  padding:6px 0px 6px 0px;
}
.nav li .content{
  flex-grow:1;
}
.nav .content p{
  color:#333;
  font-size:16px;
  width:260px;
  word-wrap: break-word;
}
.nav .btn{
  align-self: center;
}
.nav li .btn button{
  margin-right:10px;
  width:40px;
  height:30px;
  background-color:rgb(96, 96, 243);
  color:#fff;
  border-radius:4px;
  border:none;
  outline:none;
}
</style>