IMWeb训练营作业】作业

本文介绍了一个基于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: '我要早点睡觉'
            }
          ]
        }
      })


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值