记事本效果

一、介绍

记事本的效果是输入完成任务按回车键，就会添加到下面，可以删除单个任务、也可以删除全部的任务。

展示：

 二、过程

首先渲染页面

<div class="home">
      <input v-model="zhi" type="text" placeholder="请输入任务" @keyup.enter="change">
      <div class="zhon">
        <div v-for="(item,index) in task" :key='index' class="task">
            <span>{{index+1}}.</span> 
            <span>{{item}}</span>
            <span @click="shan(index)">x</span>
        </div>
      </div>
      <div class="tasks">
          <span>{{task.length}} items left</span>
          <span @click="quans">clear</span>
      </div>
  </div>

在data里面创建属性，其中task是添加的任务，zhi是输入的任务

data(){
         return {
             task:['打游戏','学习','打篮球','玩手机'],
             zhi:''
         }
     }

当点击回车键的时候触发change事件，判断当前输入框是否有值，如果有添加到task，没有弹出警示框。

change(){
             if(this.zhi!=''){
                 this.task= [...this.task,this.zhi]
                 this.zhi=''
             }else{
                 alert('请输入内容')
             }
             
         }

每个任务后面跟一个‘x’号，通过css设置当移入时显示，点击时触发shan事件，通过数组事件splice删除当前任务

css：

.zhon .task span:last-of-type{
    display: none;
}
.zhon .task:hover span:last-of-type{
    display: block;
    float: right;
}

shan： 

shan(index){
    this.task.splice(index,1)
}

全删直接赋值空数组给task：

quans(){
   this.task=[]
}

结语：

到这里记事本效果就介绍完了，祝你生活愉快！