vue2待办事项项目实例

这是一个使用mui+mint+vue2.x+vue-router+vuex+webpack制作的待办事项项目实例，样式使用了vue移动端mint ui框架，原生手机能力偏重于mui框架。该项目实现了以下功能：
①勾选按钮可以选择是否已完成；
②若已完成（被勾选），则字体变暗和被划去；若未完成（没有被勾选），则保持不变；
③每条待办事项可自由选择是否删除；
④可自由添加事务进入待办事项中，回车键效果一样；
⑤有数字提示总事项和未完成事项。

<<代码示例>>

<template>
  <div class="todo">
    <div class="header">
      <h1>待办事项</h1>
      <div class="add">
        <input type="text" placeholder="添加待办事项" v-model="newTodo" @keyup.enter="addTodo">
      </div>
    </div>
    <div class="content">
      <ul>
        <li v-for="(todo, index) in todos" :key="index">
          <div class="checkbox">
            <input type="checkbox" v-model="todo.done" @change="updateTodo">
          </div>
          <div class="text" :class="{done: todo.done}">
            {{ todo.text }}
          </div>
          <div class="delete" @click="deleteTodo">
            <i class="iconfont icon-delete"></i>
          </div>
        </li>
      </ul>
    </div>
    <div class="footer">
      <div class="total">
        总事项：{{ todos.length }}
      </div>
      <div class="undone">
        未完成：{{ undone }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { text: '学习Vue', done: false },
        { text: '学习Vuex', done: false },
        { text: '学习Vue Router', done: false }
      ]
    }
  },
  computed: {
    undone() {
      return this.todos.filter(todo => !todo.done).length
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() === '') return
      this.todos.push({ text: this.newTodo, done: false })
      this.newTodo = ''
    },
    updateTodo() {
      localStorage.setItem('todos', JSON.stringify(this.todos))
    },
    deleteTodo() {
      this.todos.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.todo {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #42b983;
    color: #fff;
    h1 {
      font-size: 20px;
      font-weight: normal;
      margin: 0;
    }
    .add {
      flex: 1;
      margin-left: 10px;
      input {
        width: 100%;
        padding: 5px;
        border: none;
        border-radius: 5px;
        outline: none;
        font-size: 16px;
      }
    }
  }
  .content {
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #eee;
        .checkbox {
          margin-right: 10px;
          input {
            width: 20px;
            height: 20px;
          }
        }
        .text {
          flex: 1;
          font-size: 16px;
          &.done {
            color: #999;
            text-decoration: line-through;
          }
        }
        .delete {
          i {
            font-size: 20px;
            color: #999;
          }
        }
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #eee;
    .total, .undone {
      font-size: 16px;
    }
  }
}
</style>