[IMWeb训练营作业]基于Vuejs的Todo List

来源：互联网发布：尚学堂马士兵java教程编辑：程序博客网时间：2024/06/09 05:14

文档说明：
运行效果图：

html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script src="vue.js"></script>    <style type="text/css">        .todolistDiv{            margin:200px auto;            width:220px;            height: auto;        }        .btn{            opacity: 0.5;            border: none;            margin-left: 10px;            box-shadow:0 0 20px lightpink;        }        .ipt{            box-shadow:0 0 20px darkblue;            border:none;        }        span{            font-size: 70px;        }        .liDiv{            margin-top: 10px;        }        .complete{            color: blue;        }    </style></head><body><!-- todolist --><div id="vue-todolist" class="todolistDiv">    <span> todolist</span>    <input class="ipt" type="text" v-model="inputVaule" v-on:keyup.enter="add"/>    <button v-on:click="add" class="btn">add</button>    <ul >        <li v-for="item in items" >            <div class="liDiv">                <input type="checkbox" v-model="item.completed">                <label  v-bind:class="{ complete:item.completed }">{{item.text}}</label>                <button v-on:click="removeTodo(item)" class="btn">x</button>            </div>        </li>    </ul></div><!-- vue框架 --><script src="vue-resource.js"></script><script src="app.js"></script></body></html>

js代码：

var STORAGE_KEY = 'todos-vuejs'//名称var todoStorage = {    fetch: function () {        var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')        todos.forEach(function (todo, index) {            todo.id = index        })        todoStorage.uid = todos.length        return todos    },    save: function (todos) {        localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))    }}var vm=new Vue({    el: '#vue-todolist',    data: {        items:todoStorage.fetch(),//直接从localstroage拿数据        inputVaule:""    },    mounted:function(){/*ready*/    },    methods:{        add:function(){            var _this=this;            this.items.push({text:this.inputVaule,completed:true});            this.inputVaule="";        },        removeTodo: function (todo) {            this.items.splice(this.items.indexOf(todo), 1)        }    },    watch:{        items:{            handler:function(items){                todoStorage.save(items)            },            deep:true        }    }})

0 0