vue实现todoList工作清单

冷不防 2023-07-09 05:28 16阅读 0赞

> 功能：

1.vue数据绑定。

2.本地存储数据。

3.√ x 是否完成工作。

> 效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ_size_16_color_FFFFFF_t_70][]

> 实现代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>todolist实战</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
       
       <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
       <style>
            .isFinish{
                color: red!important;
            }
        </style>
    </head>
    <body>
        <div id="app" class="container text-center">
           <div class="row">
               <div class="col-md-7">
                   <div class="form-group">
                       <label>添加工作事项</label>
                       <input type="text" class="form-control" v-model="newItem" @keyup.enter="addItem">
                   </div>
                   <div class="list-group text-left form-group">
                       <a href="#" class="list-group-item text-left">
                           工作清单：
                       </a>
                       <a href="#" class="list-group-item" v-for="(item,index) in Items">
                            <span>{
       {index+1}}</span>
                            <span>{
       {item.title}}</span>
                            <span class="badge" @click="removeItem(index)">
                                <i class="glyphicon glyphicon-remove"></i>
                            </span>
                            <span class="badge" :class="{isFinish:item.isFinish}" @click="toogleItem(item)">
                                <i class="glyphicon glyphicon-ok"></i>
                            </span>
                       </a>
                   </div>
                 
               </div>
           </div>
          
        </div>
        <script>
            // 本地存储数据
            let Isc=(function(){
                return{
                    add(value){
                        localStorage.setItem('todoList',JSON.stringify(value))
    
                    },
                    get(){
                        return JSON.parse(localStorage.getItem('todoList'))
                    },
                    remove(){
                        localStorage.red('todoList')
                    }
                }
            })()
           let vm =new Vue({
               el:'#app',
               data:{
                    newItem:'',
                    Items:Isc.get()||[],
               },
               methods: {
                   // 添加工作清单
                   addItem(){
                       var item={
                           id:this.Items.length+1,
                           title:this.newItem,
                           isFinish:false,
                       }
                       this.Items.push(item),
                       Isc.add(this.Items)
                       this.newItem='' // 清空input框   
                   },
                   // 完成
                   toogleItem(item){
                       item.isFinish=!item.isFinish;
                       Isc.add(this.Items)
                    },
                    // 移除
                    removeItem(index){
                        this.Items.splice(index,1)
                        Isc.add(this.Items)
    
                    }
               },
           })
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200228004533296.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ==,size_16,color_FFFFFF,t_70