todoList Vue3精简版

原创

已于 2022-03-02 09:10:01 修改 · 495 阅读

标签

#vue.js #javascript #前端

收录于

于 2022-02-28 15:39:33 首次发布

本文介绍了一个使用Vue3实现的todoList应用的精简版，该应用利用本地存储来保存任务数据。包括html、css和js三个部分的详细内容。

精简版（本地存储）

html部分

<div class="app">
        <h2>计划清单</h2>
        <input class="plan_insert" type="text" placeholder="请输入你的计划" @keyup.enter="addItem" v-model.trim="temp">
        <h3>
            未完成
            <span>({
   
   {
   
   undoList.length}})</span>
        </h3>
        <div class="list">
            <div class="item" v-for="(item,index) in undoList" :key="item.title">
                <label>
                    <input type="checkbox" v-model="item.done">
                    {
   
   {
   
   item.title}}
                </label>
                <button @click="removeItem(item)">x</button>
            </div>
        <