【IMWeb训练营作业】Vue.js便签

最新推荐文章于 2023-04-16 23:01:15 发布

xiaotututuer

最新推荐文章于 2023-04-16 23:01:15 发布

阅读量565

点赞数 1

分类专栏： Vue.js 文章标签： Vuejs

本文链接：https://blog.csdn.net/xiaotututuer/article/details/70246470

版权

Vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

功能说明：

1.回车添加任务

2.勾选完成任务

3.点×删除任务

4.双击标签编辑任务

5.查看未完成任务与已完成任务

源码：

------------------------todos.html-------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todos</title>
    <link rel="stylesheet" href="index.css">
    <style>


    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div class="page-top">
        <div class="page-content">
            <h2>任务计划列表</h2>
        </div>
    </div>
    <div class="main">
        <h3 class="big-title">添加任务：</h3>
        <input type="text" class="task-input" placeholder="例如：吃饭睡觉打豆豆； 提示：+回车即可添加任务" v-on:keyup.enter="addTodo(123,$event)" v-model="todo">
        <ul class="task-count">
            <li v-show="list.length">{{noCheckedLength}}个任务未完成</li>
            <li class="action">
                <a href="#">所有任务</a>
                <a href="#unfinished" >未完成的任务</a>
                <a href="#finished" class="active">完成的任务</a>
            </li>
            <div class="clear"></div>
        </ul>
        <h3 class="big-title">任务列表：</h3>
        <div class="tasks">
            <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
            <ul class="todo-list">
                <li class="todo" :class="{completed:item.isChecked,editing:item===editorTodos}" v-for="item in filteredList">
                    <div class="view">
                        <input class="toggle" type="checkbox" v-model="item.isChecked">
                        <label @dblclick="editorTodo(item)">{{item.title}}</label>
                        <button class="destroy" v-on:click="deleteTodo(item)">x</button>
                    </div>
                    <input class="edit" v-focus="editorTodos===item" type="text" v-model="item.title" @blur="editorTodoed(item)" @keyup.enter="editorTodoed(item)" @keyup.esc="cancelTodo(item)">
                </li>
            </ul>
        </div>
    </div>
    <script src="js/app.js"></script>
</body>
</html>

-------------index.css-------------

*{
    padding:0;
    margin:0;
}
.page-top{
    position: fixed;
    top:0;
    left:0;
    height: 40px;
    background-color: #E8593D;
    width:100%;
    text-align: center;
}
.page-content{
    color: #FFFFFF;
    width: 70%;
    margin-left: 15%;
    line-height: 40px;
    text-align: left;
}
.main{
    margin-top: 50px;
    margin-left: 15%;
    width: 70%;
    /*height: 800px;*/
    padding: 5px;
}
.main .task-input{
    margin-top: 10px;
    height:40px;
    width:100%;
    font-size: 20px;
}
.main ul li{
    /*list-style-position: inside;*/
    list-style-type: none;
    margin-top: 10px;
}
.task-count li{
    width: 100%;
    float: left;
}
.action{
    float: right;
}
.completed label{
    text-decoration:line-through;
}
.editing label{
    display: none;
}
.editing .edit{
    display: block;
}
.edit{
    display: none;
}
.action .active{
    background-color: #ccc;
}
.clear{
    clear: both;
}

------------app.js------------------------------

/**
 * Created by sotto on 2017-4-17.
 */

//存取localStorage中的数据
var store = {
    save(key, value){
        localStorage.setItem(key, JSON.stringify(value));
    },
    fetch(key){
        return JSON.parse(localStorage.getItem(key))||[];
    }
};

// var list = [
//     {
//         title: "吃饭睡觉打豆豆1",
//         isChecked: false
//     },
//     {
//         title: "吃饭睡觉打豆豆1",
//         isChecked: true
//     },
// ];
var list = store.fetch("miaov");

var vm = new Vue({
    el: ".main",
    data: {
        list: list,
        todo: "",
        editorTodos: "",//记录正在编辑的数据
        beforeTitle:'',

        visibility: "all",//通过属性值变化对数据进行筛选
    },
    watch:{
        /*list: function () {//监控list数据，当这个
            store.save("miaov",this.list);
        }*/
        list: {
            handler: function () {
                store.save("miaov",this.list);
            },
            deep: true
        },

    },
    computed:{
        noCheckedLength: function () {
            return this.list.filter(function(item){
                return !item.isChecked
            }).length
        },
        filteredList: function () {
            // 过滤的三种情况
            var filter = {
                all: function () {
                    return list;
                },
                finished: function () {
                    return list.filter(function(item){
                        return item.isChecked;
                    });
                },
                unfinished: function () {
                    return list.filter(function(item){
                        return !item.isChecked;
                    });
                }
            };
            return filter[this.visibility]?filter[this.visibility](list):list;
        }
    },
    methods: {
        addTodo(data,event) {
            //添加任务
            //向list中添加一项任务
            /*
                {
                    title:
                }
             */
            // console.log(event);
            //事件处理函数中的this指向的是当前的根实例
            // if(event.keyCode === 13){
                this.list.push({
                    title: this.todo,
                    isChecked: false
                });
            // }
            this.todo="";

        },
        deleteTodo(todo){
            var index = this.list.indexOf(todo);
            this.list.splice(index,1);
        },
        editorTodo(todo){//编辑任务
            // console.log(todo);
            this.beforeTitle = todo.title;
            this.editorTodos = todo;
            console.log(todo);
            console.log(this.editorTodos);
        },
        editorTodoed(todo){//编辑成功
            this.editorTodos='';
        },
        cancelTodo(todo){//取消编辑
            todo.title = this.beforeTitle;
            this.editorTodos='';
            this.beforeTitle = '';
        }
    },
    directives:{
        "focus": {
            update(el, binding){
                // console.log(el);
                // console.log(binding);
                if(binding.value){
                    el.focus();
                }
            }
        }
    }
});
function watchHashChange() {
    var hash = window.location.hash.slice(1);
    console.log(hash);
    vm.visibility = hash;
}
watchHashChange();
window.addEventListener("hashchange",watchHashChange);