07Vue.js实现简易的todolist列表

作者: 个人不完美 | 来源:发表于2018-04-16 14:49 被阅读0次

07Vue.js实现简易的todolist列表
vue实现简易todolist
Redux实现简易Todolist
三、Vue模板渲染
react新手demo——TodoList
vue起步：制作todolist
Vuejs 实现简易 todoList 功能与组件
React-Redux实现极其简易的Todolist
用react做输入TODOS自动添加列表
白板App

Vue.js实现简易的todolist列表

我们可以利用vue做一个简易的列表清单。要求如下：
1、在文本框内输入内容回车后可以添加一条数据在下面;
2、点击每行列表出现中杠线;
3、点击X可以清除一条;
4、点击“删除全部” 按钮可以清除勾选的列表;
5、全部删除后，出现“暂无数据”的提示;
如下面的图片所示:

image.png

通过下面的代码段可以实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>todolist实现</title>
    <style type="text/css">
        body{
             /* 清除body的默认样式 */
            padding: 0;
            margin: 0;
        }
        .del{
            text-decoration: line-through;
        }
    </style>
    <script src="./js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="thing" @keyup.13="add">
        <hr>
        <button @click="delAll">删除全部</button>
        <div v-if="!dos.length">暂无数据</div>
        <ul v-else>
            <li v-for="(item,index) in dos" :class="{del:item.isDel}" @click="change(index)">{{item.thing}} 
             <span v-show="item.isDel" @click.stop="delLi(index)">X</span>
           </li>
        </ul>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                thing:"", //添加的文本
                dos:[{
                    thing:"打篮球", //默认的值
                    isDel:false  //是否删除标记
                }]
            },
            methods: {
                //在这里添加相关事件和方法
                add(){
                    this.dos.push({
                        thing:this.thing,
                        isDel:false
                    });
                    this.thing="";
                },
                change(i){
                    //(!this.dos[i].isDel取相反的状态，如果等号前面的条件为false 则为true)
                    this.dos[i].isDel= !this.dos[i].isDel; 
                },
                delLi(i){
                    this.dos.splice(i,1);
                },
                delAll(){
                    //this.dos=[];//全部清除(这种写法不太合理，建议还是用下面的循环)
                    for(let i=0;i<this.dos.length;i++){
                        //判断有中间勾线的就删除
                        if(this.dos[i].isDel){
                            this.dos.splice(i,1);
                            i--;
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>