VUE备忘录的增删改查

一.图片描述

二.html

 <div id="app">
    <div class="wrap">
        <h2 class="sec-title">新建备忘录</h2>
        <form class="tipForm">
						<div class="flex-center">
							<input type="text" v-model="tipTitle">
							<span @click="textareaShowStatus = !textareaShowStatus">展开</span> 
							<span v-if="addStatus" @click="addTipList">+新增</span>  
							<span v-else @click="editTipList">+编辑</span>  
						</div>
						<textarea v-show="textareaShowStatus" v-model="tipCon"></textarea>
        </form>
        <h2 class="sec-title">未完成</h2>
					<tip-list :lists="noDoneList" @changehandler="changeTip" @delhandler="delTip"></tip-list>
				 
        <h2 class="sec-title">已完成</h2> 
					<tip-list :lists="doneList" @delhandler="delTip"></tip-list>
    </div>
</div>
<script type="text/x-template" id="list">
<div class="tiplist"> 
	<ul>
			<li v-for="(item,index) in lists" :key="index">
				<div  class="flex-center list-top">
					<p>{{item.tipTitle}}</p>
					<button @click="tipDone(item.id)">完成</button>
					<button @click="tipEdit(item.id)">编辑</button>
					<button @click="tipDel(item.id)">删除</button>
				</div>
				<p class="desc">{{item.tipCon}}</p>
			</li>
	</ul>
</div>
</script>

三.css

     *{
    padding:0;
    margin: 0;
    box-sizing: border-box;
}
ul{
    list-style: none;
}
.flex-center{
    display: flex;
}
.wrap{
    width:600px;
    margin:20px auto;
}
.sec-title{
    padding:10px 15px;
    font-size: 18px;;
    color:#fff;
    background: rgb(221, 97, 14);
    margin-bottom: 15px;
    border-radius: 3px;
}
.tipForm{
    background: #dddcdc;
    border-radius: 3px;
}
.tipForm input{
    width: 70%;
}
.tipForm textarea{
    display: block;
    width:100%;
    height:50px;
}
.tipForm div{
    padding:10px 0;
}
.tipForm span{
    margin:0 10px;
    padding:5px 6px;
    border-radius: 2px;
    background: rgb(2, 190, 175);
    color:#fff;
    cursor: pointer;
}
.list-top{
    background: rgb(204, 251, 228);
}
.list-top p{
    width:70%;
    padding:10px;
    color: rgb(78, 78, 78);
}
.list-top button{
    margin:0 10px;
    padding:5px 6px;
    border-radius: 2px;
    background: rgb(2, 190, 175);
    color:#fff;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    border:none;
}
.desc{
    padding:6px 15px;
    margin-bottom: 20px;
    background: rgb(237, 255, 254);
}

四.script

     /**
 * 1. 点击详情，textarea 的展示隐藏
 * 2. 点击加号，当前的备忘录存到本地，
 *  备忘录数据
  *  标题，：必须
  *  内容：必须
  *  完成未完成的状态：新建就是未完成，
  *  id:时间戳
*   加号行为：
      有一个备忘录列表，新增push到列表。
      本地存储(tips)：在页面初始化的时候判断， 是否有本地数据。没有就空数组，有的话取出来。

  // 列表渲染
    1. 初始化，filter 已完成和未完成两个状态。得到相应的数组进行渲染
    2. 数据改变 filter 已完成和未完成两个状态。得到相应的数组进行渲染    也要渲染。
  // 列表操作
    1. 完成按钮，done 属性。 当前的备忘录的done属性改为 true
 */
let tipList=Vue.extend({
  template:"#list",
  props:["lists"],
  methods: {
    // 完成按钮
    tipDone(tid){
      // 根据id找到当前数据进行done的改变 
      //数组传给子组件里面的对象址。
      let res = this.lists.filter(item=>{
        return item.id===tid
      })[0];
      res.done=true;
    },
    // 编辑按钮
    tipEdit(tid){
      this.$emit("changehandler",tid);
    },
    tipDel(tid){
      this.$emit("delhandler",tid);
    }
  },
})
Vue.component("tip-list",tipList)
let vm=new Vue({
  el:"#app",
  data:{
    textareaShowStatus:true,
    tipList:[],
    tipTitle:"",
    tipCon:"",
    noDoneList:[],
    doneList:[],
    // 控制+按钮的状态
    addStatus:true,
    changeId:"",
  },
  mounted() {
    // 
    let res = localStorage.getItem("tips");
    if(!res){
      //初始话一个空数组
      localStorage.setItem("tips","[]");
    }else{
      //字符串变对象
      this.tipList = JSON.parse(res);
    }
    // 过滤数组
    // this.doneList =getTypeList(true);
    // this.noDoneList =getTypeList(false);
    this.doneList.push(...(this.getTypeList(true)));
    this.noDoneList.push(...(this.getTypeList(false)));
  },
  methods: {
    // 添加备忘录
    addTipList(){
      if(this.tipCon=="" || this.tipTitle=="") return false;
      let tipObj={
        id:(new Date()).getTime(),
        tipTitle:this.tipTitle,
        tipCon:this.tipCon,
        done:false,
        show:false
      };
      this.tipList.push(tipObj)
      console.log(this.tipList);
      this.tipTitle="";
      this.tipCon=""
    },
    // 过滤
    getTypeList(type){
      return this.tipList.filter(item=>{
        return item.done===type
      })
    },
    // 更改备忘录
    /**
     * 得到了要修改备忘录的id，根据id找到数据。 展示在页面
     * 新增按钮点击万之后是修改。
     *  新增按钮根据是否是编辑进行不同的展示
     * 
     */
    changeTip(tid){
      // 进入编辑状态
      this.addStatus = false;
      let res = this.tipList.filter(item=>{
        return item.id===tid
      })[0];
      //要更改的Id
      this.changeId = tid;
      this.tipTitle= res.tipTitle
      this.tipCon= res.tipCon
    },
    // 点击编辑的保存按钮
    editTipList(){
      // 找到当前数据修改当前数据
      //老数据
      let res = this.tipList.filter(item=>{
        return item.id === this.changeId
      })[0];
      //更新老数据
      res.tipTitle= this.tipTitle;
      res.tipCon= this.tipCon;
      // 重置状态及数据
      this.addStatus = true;
      this.tipTitle="";
      this.tipCon=""
    },
    // 删除
    delTip(tid){
      //在数组里面删除对应的备忘录
      let indexs = this.tipList.findIndex(item=>{
        return item.id===tid
      })
      // 数组替换截取方法,改变原数组
      this.tipList.splice(indexs,1);

    },
  },
  // 监控
  watch: {
    tipList:{
      handler(){
        //操作本地存储
        localStorage.setItem("tips",JSON.stringify(this.tipList));
        // 数组改变 
        this.doneList =[];
        this.noDoneList =[];
        this.doneList.push(...(this.getTypeList(true)));
        this.noDoneList.push(...(this.getTypeList(false)));
      },
      deep:true
    }
  },
})