html页面布局:

引用bootstrap.css,vue.js,axios.js, todo.js

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TodoList</title>
    </head>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <style>
        .del{text-decoration: line-through;color: #ccc}
    </style>
    <body>
    <div id="app">
        <div class="container">
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                    <div class="jumbotron">
                        <div class="display-4">
                            <h3>要完成的{{count}}件事</h3>
                            <input type="text" class="form-control" v-model="title" @keyup.13="add">
                        </div><br>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item" v-for="(todo,index) in todos" @dblclick="remember(todo)">
                                <span :class="{del:todo.isSelected}" v-show="cur!=todo">
                                   <input type="checkbox" v-model="todo.isSelected">{{todo.title}}
                                </span>
                                <input type="text" v-model="todo.title" v-show="cur==todo" @keyup.enter="cancel" @blur="cancel" v-focus="cur==todo">
                                <button class="float-right btn btn-danger btn-sm" @click="remove(todo)">&times;</button>
                            </li>
                           
                        </ul>
                    </div>
                </div>
                <div class="col-md-2"></div>
            </div>
        </div>
    </div>
    <script src="todo.js"></script>
    </body>
    </html>

todo.js

todo.js :包含json数据以及添加数据,修改数据,删除数据

    let vm = new Vue({
        el:"#app",
        data:{
            todos:[
                {isSelected:false,title:'吃饭'},
                {isSelected:false,title:'睡觉'},
                {isSelected:false,title:'打豆豆'},
    
            ],
            title:'',
            cur:''
        },
        created(){//从本地存储中获取数据
           this.todos= JSON.parse(localStorage.getItem('data'))||this.todos;
        },
        watch:{
            todos:{//wantch默认只做一层监控数据变化,深度监控
                handler(){//默认写成函数
                         localStorage.setItem('data',JSON.stringify(this.todos))
                },deep:true
            }
        },
        directives:{
            focus(el,bindings){
                if(bindings.value){//点击当前li是让内部输入框获取焦点
                    el.focus();//获取焦点
                }
            }
        },
        methods:{
            add(){
                this.todos.push({
                    isSelected:false,
                    title:this.title
                })
                this.title=''
            },
            remember(todo){
                this.cur = todo
            },
            cancel(){
                this.cur=''
            },
            remove(todo){
                this.todos=this.todos.filter(item =>item!==todo);
            }
        },
        computed:{
            count(){
                return this.todos.filter(item =>!item.isSelected).length
            }
        }
    })
Last modification:February 29th, 2020 at 02:37 pm
如果觉得我的文章对你有用,请随意赞赏