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

最新推荐文章于 2022-11-03 15:35:40 发布

小意达的花儿-豆芽菜

最新推荐文章于 2022-11-03 15:35:40 发布

阅读量211

点赞数

分类专栏： vue-js 文章标签： vue-js

本文链接：https://blog.csdn.net/u014523395/article/details/70245817

版权

vue-js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文档说明：
运行效果图：

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

收藏

觉得还不错? 一键收藏
0
评论
[IMWeb训练营作业]基于Vuejs的Todo List

文档说明：运行效果图： html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.js"></script> <style type="text/css"> .todolistDiv{
复制链接

扫一扫