Vue待办清单小实例

2018年3月1日22:09:18 发表评论 29

今天学会了一个vue实现待办清单的简单实例,是一个html单页,没有使用.vue文件,因为.vue文件是不可以直接运行的,对于新手来说,必须要学会vue项目搭建才可以运行.vue项目,我们这个待办清单实例代码量很少,完全不需要使用的.vue文件,下面一起来看看:

Vue待办清单小实例

这个待办清单需要实现的功能:
1. 可添加清单
2. 显示清单的数据
3. 可切换清单状态,并且可删除
4. 可编辑清单

待办清单完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 待办清单</title>
    <style>
        *{padding: 0;margin: 0; box-sizing: border-box;}
        #todo{
            margin: 0 auto;
            width: 1000px;
            margin: 50px 0;
            padding: 10px;
        }
        #todo>li{
            list-style-type: none;
            position: relative;
            line-height: 30px;
            cursor: pointer;
            padding-left: 10px;
            border: 1px solid #fff;
        }
        #todo>li:hover {
            border: 1px solid #eee;
        }
        #todo li .chek{
            text-decoration: line-through;
            color: #eee;
        }
        #todo li.editing div{
            display: none;
        }
        #todo li .edit-txt{
            padding-left: 10px;
            margin-left: 10px;
            width: 80%;
            display: none;
            height: 30px;
        }
        #todo li.editing .edit-txt{
            display: block;
        }

        #todo .select-box.check{
            background: blue;
        }
        #todo .close{
            position: absolute;
            right: 10px;
        }
        #todo .close:hover{
            color: red;
        }
        #todo>h1{
            margin-bottom: 30px;
            text-align: center;
        }
        #todo .text{
            width: 100%;
            height: 30px;
            margin: 20px 0;
            padding-left: 10px;
        }
        #todo .warn input{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div id="todo">
        <h1>待办清单</h1>
        <input class="text" type="text" placeholder="请输入你最近想做的事" @keyup.enter="addList" v-model="addText" />
        <div class="warn">
            <p>共有{{todoList.length}}个清单,{{noend===0? "全部完成了":'已完成了'+(todoList.length-noend)+',还有'+noend+'未完成'}}</p>

            <input @click="chooseList(1)" type="radio" name="todo" value="所有清单" checked><label>所有清单</label>
            <input @click="chooseList(2)" type="radio" name="todo" value="已完成清单"><label>已完成清单</label>
            <input @click="chooseList(3)" type="radio" name="todo" value="未完成清单"><label>未完成清单</label>

        </div>
        <li v-for="(list, index) in newTodoList" :class="{'editing':curIndex===index}">
            <div>
                <input type="checkbox" @click="list.status=!list.status" :checked="list.status"/>
                <span @dblclick="curIndex=index" :class="{'chek':list.status}">{{ list.name }}</span>
                <span @click="delect(index)" class="close">X</span>
            </div>

            <input type="text" class="edit-txt" v-model="list.name" 
                @key.esc="cancelEdit(list)"
                @key.enter="editAfter"
                @focus="editBefore(list.name)"
                @blur="editAfter"
                v-focus
            />
        </li>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script>
        var todo = new Vue({
            el: '#todo',
            data: {
                addText: '',
                curIndex: '',
                beforeEditText: '',
                //name-名称,status-完成状态
                todoList: [
                    {name:'HTML5', status:false},
                    {name:'CSS3', status:false},
                    {name:'JS', status:false},
                    {name:'Vue', status:false},
                    {name:'React', status:false},
                ],
                // 存储
                newTodoList:[]
            },

            methods: {
                addList() {
                    if(this.addText != "") {
                        this.todoList.push({
                            name: this.addText,
                            status: false,
                        });
                        this.addText="";
                    }
                },

                // 所有、已完成、未完成清单
                chooseList(type) {
                    switch(type) {
                        case 1: this.newTodoList = this.todoList;break;
                        case 2: this.newTodoList = this.todoList.filter(function(item) {return item.status});break;
                        case 3: this.newTodoList = this.todoList.filter(function(item) {return !item.status});break;

                    }
                },

                // 切换状态
                cutState() {


                },

                // 删除
                delect(index) {
                    this.todoList.splice(index, 1);
                    this.newTodoList = this.todoList;
                },

                // 取消修改
                cancelEdit(val) {
                    val.name=this.beforeEditText;
                    this.curIndex="";
                },

                // 修改后
                editAfter() {
                    this.curIndex="";


                },

                // 修改前
                editBefore(name) {
                    this.beforeEditText=name;
                },

            },

            computed: {
                // 未完成的待办
                noend: function() {
                    return this.todoList.filter(function(item) {
                        return !item.status
                    }).length;
                }
            },

            // 自定义事件
            directives: {
                // 自动获取焦点
                "focus": {
                    update(el) {
                        el.focus();
                    }
                }
            },

            // 初始化
            mounted() {
                this.newTodoList = this.todoList;
            },
        })
    </script>
</body>
</html>

代码解析

添加清单

  1. 给待办清单输入框绑定一个@keyup.enter事件,并且设置双向绑定。
  2. 使用todoList数组来存储所有待办清单,有名字和状态两个属性
  3. 使用v-for循环显示所有待办

显示清单数据

  1. 使用todoList.length显示总清单数
  2. 设置一个未完成待办的计算属性noend,并且显示未完成
  3. 使用todoList.length-noend就是已完成的清单数量

切换清单状态

  1. 给清单的复选框加个点击事件:当前状态为相反数
  2. 给删除的元素添加个delect事件,删除当前索引。

双击编辑清单

  1. 循环给所有待办名称绑定点击事件
  2. 如果当前点击就隐藏div,显示编辑的input
  3. 编辑的input绑定esc,enter事件等
猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: