简易TodoList应用-优快云博客

本文介绍了一个基于Vue.js的简易待办事项应用实现方法。通过HTML、CSS和JavaScript，该应用实现了添加任务、标记完成状态及删除任务等功能。适用于前端开发初学者实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在赶项目，我就简单的做了下。

* {
        margin: 0;
        padding: 0;
      }
      html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      input {
        -webkit-tap-highlight-color: rgba(255,255,255,0);
      }
      .main {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .main .header {
        position: relative;
        width: 100%;
        height: 60px;
        background-color: #99A9BF;
        color: #fff;
        line-height: 60px;
        font-size: 30px;
        text-align: center;
      }
      .main .mbody {
        position: relative;
        margin: 0 auto;
        width: 800px;
        height: -webkit-calc(100% - 60px);
        height: calc(100% - 60px);
        overflow: auto;
        text-align: center;
      }
      .mbody > input{
        position: relative;
        padding: 0 10px;
        border: 0 none;
        outline: 0 none;
        box-sizing: border-box;
        border: 1px solid #000;
        border-radius: 10px;
        width: 400px;
        height: 40px;
        font-size:20px;
        margin: 20px auto;
      }
      .mbody > input:-webkit-input-placeholder {
        color: #666;
      }
      .mbody .listbox {
        position: relative;
        margin: 0 auto;
        width: 600px;
      }
      .items .item {
        text-align: left;
      }
      .items .item span.isChecked {
        text-decoration: line-through;
      }

<div id="app"></div>

    <script type="x-template" id="temp">
      <div class="main">
        <div class="header">Todo List</div>
        <div class="mbody">
          <input type="text" name="tocontent" @keyup.enter="addTodo" placeholder="添加任务，例如：我要看1小时书" v-model="tocontent"/>

          <div class="listbox">
            <span v-show="todos.length == 0">暂时没有任务</span>
            <div class="items">
              <div class="item" v-for="(todo, index) in todos">
                  <input type="checkbox" v-model="todo.isChecked"/>
                  <span :class="todo.isChecked ? 'isChecked': '' ">{{ todo.content}}</span>
                  <button @click='delTodo(index)'>删除</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </script>

var todolist = new Vue({
        el: '#app',
        template: "#temp",
        methods: {
          delTodo(i){
            this.todos.splice(i,1)
          },
          addTodo(){
            this.todos.push({
              isChecked: false,
              content: this.tocontent
            })
            this.tocontent = '';
          }
        },
        data: {
          tocontent: "",
          todos: [
            {
              isChecked: false,
              content: '我要早点睡觉'
            },
            {
              isChecked: false,
              content: '我要早点睡觉'
            }
          ]
        }
      })

IMWeb训练营作业】作业