【IMWeb训练营作业】vuejs简单任务列表实现

最新推荐文章于 2024-06-16 13:45:10 发布

土文

最新推荐文章于 2024-06-16 13:45:10 发布

阅读量360

点赞数 1

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

本文链接：https://blog.csdn.net/szu_ningtowen/article/details/70249768

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

【IMWeb训练营作业】vuejs简单任务列表实现

主要包括如下内容：

任务内容
核心代码
演示效果

任务内容

增删便签任务
编辑便签任务
watch深度监控数据
利用hash过滤数据

核心代码

所有代码托管在 https://git.oschina.net/marknings/vuelearn1.git

vm代码如下所示

var store = {
    save(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    fetch(key){
        return JSON.parse(localStorage.getItem(key)) || [];
    }
}

var list = store.fetch("todolist");

var filter = {
    all:function(list){
        return list;
    },
    finished:function(list){
        return list.filter(function(item){
            return item.isChecked;
        })
    },
    unfinished:function(list){
        return list.filter(function(item){
            return !item.isChecked;
        })
    }
}

var vm = new Vue({
    el:".main",
    data:{
        list:list,
        todo:"",
        editortodos:"",
        beforeContent:"",
        visibility:"all"  //all finished unfinished
    },
    watch:{
        /*list:function(){
            store.save("todolist",this.list);
        }*/
        list:{
            handler:function(){
                store.save("todolist",this.list);
            },
            deep:true
        }
    },
    methods:{
        addTodo(event){
            this.list.push({
                content:this.todo,
                isChecked:false
            });
            this.todo = "";
        },
        removeTodo(todo){
            var index = this.list.indexOf(todo);
            this.list.splice(index,1);
        },
        editorTodo(todo){
            this.beforeContent = todo.content;
            this.editortodos = todo;
        },
        editorTodoend(todo){
            this.editortodos = "";
        },
        cancelTodo(todo){
            todo.content = this.beforeContent;
            this.editortodos = "";
        }
    },
    directives:{
        "foucs":{
            update(el,binding){
                if (binding.value) {
                    el.focus();
                }
            }
        }
    },
    computed:{
        noCheckLength:function(){
            return this.list.filter(function(item){
                return !item.isChecked
            }).length;
        },
        filterList:function(){
            return filter[this.visibility]?filter[this.visibility](list):list;
        }
    }
});

function watchHashChange(){
    var hash = window.location.hash.slice(1);
    vm.visibility = hash;
}

watchHashChange();

window.addEventListener("hashchange",watchHashChange);

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宁土文vue任务计划</title>
    <link rel="stylesheet" type="text/css" href="index.css" />      
    <link rel="stylesheet" type="text/css" href="./lib/bootstrap/3.3.0/css/bootstrap.css"/>
</head>
<body >
   <div class="main container">
       <div class="row">
        <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#all">宁土文任务计划列表</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#all">所有任务</a></li>
                <li ><a href="#unfinished">未完成任务</a></li>
                <li><a href="#finished">已完成任务</a></li>

            </ul>
        </div>
        </div>
    </nav>
</div>
    <div class="row">
            <span>添加任务：</span>
    </div>
    <div class="row">
        <input @keyup.enter="addTodo"
                           v-model="todo" placeholder="提示：按回车添加" class="form-control"  />
    </div>

    <br/>
    <br />
    <div class="row mt50">
        <span>任务列表：</span>
        <span v-show="list.length"> {{noCheckLength}}个未完成任务</span>
     </div>

     <div class="row">
         <table class="table table-bordered">
            <thead>
                <tr>                    
                  <th class="text-center" width="15%">完成</th>
                  <th width="70%">任务</th>
                  <th class="text-center" width="15%">删除</th>
                </tr>
              </thead>
              <tbody>
                <tr :class="{ completed:item.isChecked,editing:item === editortodos}" v-for="item in filterList">
                  <td class="text-center">
                    <input type="checkbox" name="" v-model="item.isChecked">
                  </td>
                  <td>
                        <label v-if="editortodos !== item" v-on:dblclick="editorTodo(item)">{{ item.content }}</label>
                        <input v-if="editortodos === item" 
                                type="text" 
                                class="form-control"
                                name="" 
                                v-model="item.content" 
                                v-foucs="editortodos === item"
                                @blur="editorTodoend(item)"
                                @keyup.enter = "editorTodoend(item)"
                                @keyup.esc = "cancelTodo(item)"
                            />
                  </td>
                  <td class="text-center">
                        <button class="btn btn-primary" @click="removeTodo(item)">删除</button>
                  </td>
                </tr>
                <tr v-if="!list.length">
                    <td colspan="3">
                        <span v-show="!list.length">还未添加任何任务</span>
                    </td>
                </tr>
              </tbody>
         </table>
    </div>
</div>
    <script type="text/javascript" src="./lib/jquery/1.11/jquery.js"></script>
    <script type="text/javascript" src="./lib/bootstrap/3.3.0/js/bootstrap.js"></script>
    <script type="text/javascript" src="./lib/vue/2.2.6/vue.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

演示效果

PC端效果
手机端效果
网上演示url

http://vueimweb.oschina.mopaasapp.com/

土文

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【IMWeb训练营作业】vuejs简单任务列表实现

【IMWeb训练营作业】vuejs简单任务列表实现主要包括如下内容：任务内容核心代码演示效果任务内容增删便签任务编辑便签任务 watch深度监控数据利用hash过滤数据核心代码所有代码托管在 https://git.oschina.net/marknings/vuelearn1.gitvm代码如下所示var store = { save(key,value){
复制链接

扫一扫

专栏目录