适合前端初学者，vue.js完成ToDoList的增删改，支持回车提交增加，及修改时自动获取焦点

重新学习vue，将实例中的ToDoList做了些调整。增加了些功能

功能：

1、添加要做事项，支持回车完成添加，也可以点击按钮添加，添加后input清空

2、待做事项，是一个有序列表

3、列表可以删除，修改

4、修改时，单击一次，input自动获取焦点，进行修改，回车或者点击其他区域完成修改。

效果如图：

文件3个，分别是app.vue、TodoList.vue、TodolistItem.vue，见下图。

话不多说，代码见下图：

 Todolist.vue的html部分

<template>
  <div class="todo-block">
    <div class="input-todolist-content">
      <h2>Add TodoList</h2>
      <input class="input-box" :placeholder="holder" v-model="words" type="text" @keyup.enter= "insertItem" />
      <button class="submit-button" v-on:click="insertItem">添加</button>
    </div>
    <div class="todo-con">
      <p>待做清单</p>
      <ul class="todolist-block">
        <li v-for="(item, index) in list" v-bind:key="index">
          <TodolistItem
            v-bind:item = "item"
            v-bind:index = "index"
            v-on:deleteItem = "deleteItem"
            v-on:modifyItem = "modifyItem"
          />
        </li>
      </ul>
    </div>
  </div>
</template>

  Todolist.vue的js部分

<script>
import TodolistItem from './TodolistItem.vue'
export default{
  name: 'TodoList',
  components: {
    TodolistItem
  },
  data () {
    return {
      words: '',
      list: [],
      holder: '请输入代办事项' //初始化placeholder的值
    }
  },
  methods: {
    insertItem () {
      this.list.push(this.words);
      this.holder = '';//清空placeholder
      this.words = ';//输入完成后，清空input
    },
    deleteItem (index) {
      this.list.splice(index, 1);
    },
    modifyItem(newContent, index) {
      console.log("我是修改的" +  newContent)
      this.list.splice(index, 1, newContent);
    }
  }
}
</script>

 TodoList.vue的css部分

<style scoped lang="stylus">
.todo-block{
  margin-left 1.875rem
  color #333
  display flex
  flex-direction row
  justify-content left
  margin-top 30px
}
h2
  text-align center
  font-size 1rem
  margin-bottom 20px

.input-box
  border 1px solid #B8B8B8
  padding 5px 0.625rem
  font-size 0.75rem
  color #FF9900

.input-todolist-content
  font-size 16px
  line-height 1.25rem
  padding 0.0625rem

.submit-button
  height 25px
  width 3.125rem
  border none
  color #333
  margin-left 1.25rem
  display inline-block

.todolist-title
  line-height 2.5rem

.todolist-block
  margin-top 1.875rem

.todolist-block li
  line-height 1.25rem
  margin-bottom 0.9375rem
  font-size 12px
.todo-con
  margin-left 30px
  border-left 1px solid #B8B8B8
  padding-left 30px
  width 60%
  height 300px
</style>
 

 TodolistItem.vue的html部分 

<template>
  <div class="todolist-item">
      <div>
        <span>{{ index + 1 }}·</span>
        <span v-show="!isActive" v-on:click="activeItem">{{ item }}</span>
        <span v-show="isActive">
          <input v-model="content" ref='inputFocus' @keyup.enter="inactiveItem" v-on:blur="inactiveItem" type="text" />
        </span>
      </div>

      <span v-on:click="$emit('deleteItem', index)">X</span>
  </div>
</template>

  TodolistItem.vue的js部分 

<script>
  export default {
    name: 'TodolistItem',
    props: ['item', 'index'],
    data() {
      return {
        content: ' ',
        isActive: false,
      }
    },
    methods: {
      // 激活修改函数状态
      activeItem() {
        this.isActive = true;
        this.content = this.item;
        this.$nextTick(function(){
          this.$refs.inputFocus.focus();//选中即可获取焦点
        })

      },
      // 关闭修改函数状态
      inactiveItem() {
        this.$emit('modifyItem', this.content, this.index);
        console.log(this.content);
        this.isActive = false
      }
    }
  }
</script>

   TodolistItem.vue的css部分 

<style lang="stylus">
.todolist-item
   display flex
   flex-direction row
   justify-content space-between
input
  border :1px solid #f90
  line-height 1.25rem
</style>

 纯属学习分享，欢迎讨论