vue编写to-do list源码

前端重于积累，下次使用不迷路。
纯vue代码
话不多说,直接上效果图:

源码附上:

<template>
  <div class="bgBody">
    <!--    卡片-->
    <el-row :gutter="12" >
      <el-col :span="8" >
        <el-card shadow="hover" class="bgRow">

          <!--    电影清单    -->
          <h2 style="margin-right: 200px;line-height: initial;"><strong style="font-weight: 10;color: #3f8b5c;">想看的电影：</strong>
            <input style="background-color: rgb(75,76,82);border: none;border-radius: 5px;height: 20px;color: rgb(200,200,200)"
                   type="text" v-model="inputValue" @keydown.enter="submit"></h2>
          <h2 style="font-weight: 10;color: #b68a26; line-height: initial; margin-right: 410px">想看:({{noLength}})</h2>
          <h3 class="xiangKan">
            <ul>
              <li v-for="(item,index) in todoList" :key="index" v-show="!item.done">
                <input type="checkbox" @click.prevent="change(item,true)">
                <span v-if="index!=updateIndex" @dblclick="update(item,index)" style="font-weight: 10;">{{item.title}}</span>
                <input v-if="index==updateIndex"
                       type="text"
                       v-model="item.title"
                       @keydown.enter="updateSave"
                       @keydown.esc="backData(item)"
                       @blur="updateSave"
                       v-focus
                       style="background-color: rgb(75,76,82);border: none;border-radius: 5px;height: 20px;color: rgb(200,200,200)"
                >
                <span class="del-btn" @click="del(index)">×</span>
              </li>
            </ul>
          </h3>
          <h2 style="font-weight: 10;color: #959595;line-height: initial; margin-right: 380px" >已看完:({{yesLength}})</h2>
          <h3 class="yiKan">
            <ul >
              <li v-for="(item,index) in todoList" :key="index" v-show="item.done">
                <input type="checkbox" checked @click.prevent="change(item,false)">
                <span v-if="index!=updateIndex" @dblclick="update(item,index)"style="font-weight: 10;">{{item.title}}</span>
                <input v-if="index==updateIndex"
                       type="text"
                       v-model="item.title"
                       @keydown.enter="updateSave"
                       @keydown.esc="backData(item)"
                       @blur="updateSave"
                       v-focus
                       style="background-color: rgb(75,76,82);border: none;border-radius: 5px;height: 20px;color: rgb(200,200,200)"
                >
                <span class="del-btn" @click="del(index)">×</span>
              </li>
            </ul>
          </h3>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
name: "TODO",
  data() {
    return {
      inputValue: "", // 输入框的值
      todoList: [], // 数据
      updateIndex: -1, //要修改的元素下标
      tempValue: "" //临时保存信息的变量
    }
  },
  created() {
    // 初始化数据
    let todoList = localStorage.todoList;
    if (todoList) {
      this.todoList = JSON.parse(todoList)
    }
  },
  computed: {
    noLength() { // 计算未完成的元素长度
      let count = 0
      this.todoList.map(item => {
        if (!item.done) {
          count++
        }
      })
      return count
    },
    yesLength() { // 计算已完成的元素长度
      let count = 0
      this.todoList.map(item => {
        if (item.done) {
          count++
        }
      })
      return count
    }
  },
  methods: {
    submit() {
      // 提交
      this.todoList.push({
        title: this.inputValue,
        done: false
      })

      // 置空输入框
      this.inputValue = ""

      //同步
      this.save();
    },
    change(item, checked) {
      // 点击复选框，改变完成状态
      if (checked) {
        item.done = true
      } else {
        item.done = false
      }
      this.save();
    },
    update(item, index) {
      // 把元素的内容临时保存到一个变量中
      this.tempValue = item.title
      // 设置要修改元素的下标
      this.updateIndex = index
    },
    updateSave() {
      // 修改后保存
      this.save()
      // 还原数据
      this.updateIndex = -1
      this.tempValue = ""
    },
    backData(item) {
      // 按esc键还原，设置当前元素的内容为保存的临时变量值
      item.title = this.tempValue
      // 清除要修改的元素下标
      this.updateIndex = -1
      // 清除临时变量
      this.tempValue = ""
    },
    del(index) {
      // 根据下标删除元素
      this.todoList.splice(index, 1)
      this.save()
    },
    save() {
      //同步数据
      localStorage.todoList = JSON.stringify(this.todoList)
    }
  },
  directives: { // 自定义指令
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }

}
</script>

<style scoped>
.del-btn{
  margin-left:20px;
  font-size:16px;
  color:red;
  cursor:pointer;
}
.xiagnKan ul{
  list-style: none;
  padding: 0;
  margin: 0;
  color: rgb(130,130,130);
}
.xiangKan ul li{
  line-height: 30px;
  color:darkgoldenrod;
}
.yiKan ul{
  list-style: none;
  padding: 0;
  margin: 0;
  color: rgb(130,130,130);
}
.yiKan ul li{
  line-height: 30px;
  color: rgb(130,130,130);
}
.bgRow{
  background: rgb(45,46,52);
  border: none;
}
.bgBody div{
  margin-left: calc(50% - 300px);
}
</style>

More than a favor for you!
对你何止一句钟意。