Vue案例——TodoList

Vue案例——TodoList

vue TodoList案例
这个案例主要实现了添加、列表的显示、正在进行、已完成、localstorage本地保存、事项数量的更新、还有清空所有等功能。

代码部分如下：
HTML部分：

<div id="app" v-cloak>
       <header class="header">
           <section>
               <form action="javascript:postaction()" id="form">
                    <label for="title">TodoList</label>
                    <input type="text" id="title" name="title" autocomplete="off" placeholder="添加ToDo" v-model="title" @keyup.enter="add()">
               </form>
           </section>
       </header>
       <main>
        <section>
               <h2 style="color:crimson ;">正在进行<span>{{this.list.length-this.num()}}</span></h2>
               <ol id="todolist" class="">
                   <li v-for="(item,key) in list" :key="key" v-show="!item.flag">
                        <input type="checkbox" v-model="item.flag" >
                        <p @click="change(key)">
                            <span v-show="!item.show">{{item.title}}</span>
                            <input type="text" v-model="item.title" v-show="item.show"  @blur="savelist(key)">
                        </p>
                        <a  @click="cancel()">X</a>
                   </li>
               </ol>
               <h2 style="color: lime;">已完成<span>{{this.num()}}</span></h2>
               <ul>
                    <li v-for="(item,key) in list" :key="key" v-show="item.flag">
                        <input type="checkbox" v-model="item.flag" >
                        <p @click="change(key)">
                            <span v-show="!item.show">{{item.title}}</span>
                            <input type="text" v-model="item.title" v-show="item.show"  @blur="savelist(key)">
                        </p>
                        <a  @click="cancel()">X</a>
                        <!--删除功能 -->
                    </li>
               </ul>
        </section>
        </main>
        <footer class="footer">
            Copyright © 2020 todolist.cn 
            <a href="javascript:DeleteAll()" @click="DeleteAll()">clear</a>
            <!--清空列表 -->
        </footer>
    </div>

CSS部分：

	<style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        body {
            font-size: 16px;
            background: darkgray;
        }
        div[v-cloak]{
            display: none;
        }
        /* 头部开始 */
        .header{
            height: 50px;
            background-color: #333;
            background: rgba(47,47,47,0.98);
        }
        section {
            margin: 0 auto;
        }
        section {
            width: 600px;
            padding: 0 10px;
            
        }
        label{
            float: left;
            width: 100px;
            line-height: 50px;
            color: #ddd;
            font-size: 23px;
            cursor: pointer;
        }
        header>section form>input{
            float:right;
            width: 60%;
            height: 25px;
            margin-top: 12px;
            border-radius: 5px;
            text-indent: 10px;
            border: none;
            outline: none;
        }
        .section{
            margin-top: 30px;
        }
        /* 头部结束 */
        /* ================== */
        /* 身体部分 */
        h2{
            position: relative;
        }
        h2:nth-of-type(2) {
            margin-top: 20px;;
        }
        li>input {
            position: absolute;
            top: 6px;
            left: 10px;
            width: 22px;
            height: 22px;
            cursor: pointer;
        }
        li {
            height: 33px;
            line-height: 33px;    
            background-color: #fff;
            position: relative;
            padding: 0 45px;
            margin-bottom: 10px;
            border-left: 5px solid lawngreen;
            margin-top: 20px;;
        }
        li p input {
            top: 3px;
            left: 40px;
            width: 70%;
            height: 20px;
            line-height: 14px;
            text-indent: 6px;
            font-size: 15px;
        }
        li a {
            position: absolute;
            top: 2px;
            right: 5px;
            display: inline-block;
            width: 14px;
            height: 12px;
            border-radius: 14px;
            border: 6px double #FFF;
            background: #CCC;
            line-height: 14px;
            text-align: center;
            color: #FFF;
            font-weight: bold;
            font-size: 15px;
            cursor: pointer;
        }
        h2 span {
            position: absolute;
            top: 2px;
            right: 5px;
            display: inline-block;
            padding: 0 5px;
            height: 20px;
            border-radius: 20px;
            background: #E6E6FA;
            line-height: 22px;
            text-align: center;
            color: #666;
            font-size: 15px;
        }
         /* 身体部分  */
        /* ============== */
        /* ============== */
        /* 尾部 */
        .footer {
            color: #666;
            font-size: 14px;
            text-align: center;
            margin-top: 30px;
        }
    </style>

JS部分：

	<!--我这里是用的线上引用地址  -->
	<script src="http://www.jq22.com/jquery/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            title:"",
            list:JSON.parse(localStorage.getItem("to")) || []
        },
        methods: {
            //出发回车键盘按钮的时候进行添加
           add() {
               if(this.title=="") return false;
               this.list.push({title:this.title,flag:false,show:false});
               localStorage.setItem("to",JSON.stringify(this.list))
               this.title = "";
           },
           change(key){
               for(var i in this.list) {
                this.list[i].show = false;
               }
               this.list[key].show = true;
           },
           //当鼠标失去焦点的时候、
           savelist(key) {
                this.list[key].show = false;
           },
           //删除每条信息
           cancel(e) {
                this.list.splice(e,1);
                localStorage.setItem("to",JSON.stringify(this.list));
           },
        //    判断状态中的个数
           num(){
               let count = 0 ;
               this.list.forEach(e => {
                    if(e.flag == true) {
                        count++;
                    }
               });
               return count;
                localStorage.setItem("to",JSON.stringify(this.list));
            },
            //清空数组
            DeleteAll(){
                this.list =[];
                localStorage.setItem("to",JSON.stringify(this.list));
            }
        },
    })
</script>

案例来自TodoList官网，小编呢就按照官网上给的功能用自己的方法写了一遍，网址：http://www.todolist.cn/；