<!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>to do list</title>
                <script src="../vue.js"></script>
                <style>
                *{
                    margin: 0;
                    padding: 0
                }  
                li{
                    list-style: none;
                    margin-top:10px;  
                    border: 1px solid #eee;  
                    border-radius: 4px;
                    
                }
                #do{
                    width:400px;
                    border: 2px solid #ccc;
                    margin: 0 auto;  
                    padding: 5px 20px;
                }
                .red{
                    background: rgb(233, 232, 159);
                }
                .green{
                    background: rgb(108, 170, 156);
                }
                span{
                    float: left;
                }

</style>
            </head>
            <body>
                <div id="do">
                    <input type="text" v-model='string'>
                    <button @click='add()'>添加任务</button>
                    <hr>
                    <ul>
                        <li v-for='(item,index) of list'
                        :class="item.state?'green':'red'"
                        >
                            <span>{{index+1}}、</span>
                            <p>{{item.msg}}</p>
                            <div v-if='item.state'>已完成</div>
                            <div v-else>
                                <button @click='finish(index)'>去完成</button>
                            </div>
                            <button @click='del(index)'>删除任务</button>
                        </li>
                    </ul>
                </div>
            </body>
            </html>

<script>
            // 实现todolist 全部  未完成 已完成
            new Vue({
                el:"#do",
                data:{
                    string:'' ,
                    list:[{state:true,msg:"今天中午12:20吃饭"},
                        {state:false,msg:"晚上11点之前睡觉"},
                        {state:false,msg:"周末看一次电影"}]
                },
                methods:{
                    add(){
                        if(this.string==''){
                            alert('添加任务不能为空')
                        }
                        else{
                            this.list.push({state:false,msg:this.string})  
                        }
                        },
                    del(index){
                        this.list.splice(index,1)
                    },
                    finish(index){
                        this.list[index].state=true
                    }
                }
            })

</script>

最新文章

  1. 可变数组NSMutableArray
  2. AngularJs自定义指令--执行顺序 (原文：http://www.cnblogs.com/sagacite/p/4624227.html)
  3. JAVA 1.9 面向对象之封装
  4. Caliburn.Micro学习笔记目录——Zhouyongh
  5. 爱上WPF,努力才会有希望！
  6. FingerGestures 屏蔽NGUI的方法
  7. iOS的几种定时器
  8. oracle数据库管理员简介、导入数据与导出数据
  9. [BZOJ 3196] 213平衡树 【线段树套set + 树状数组套线段树】
  10. iOS 数据库操作(使用FMDB)
  11. Android取得电池的电量
  12. Drawable复习—第六章
  13. jQuery 弹出窗口的形式一直是具体案件的中心
  14. Swing入门
  15. zoj 3659 Conquer a New Region The 2012 ACM-ICPC Asia Changchun Regional Contest
  16. 如何写jquery插件
  17. nmcli命令使用以及网卡绑定bond
  18. maven的标准pom.xml详解
  19. Mysql加锁过程详解（3）-关于mysql 幻读理解
  20. flask登录插件 flask-login

热门文章

  1. spring-boot5代码
  2. Android Weekly Notes Issue #276
  3. 玩转Google开源C++单元测试框架Google Test系列(gtest)(总)
  4. (5)表单Action后台验证
  5. Android sdk 搭建
  6. 机器学习：simple linear iterative clustering (SLIC) 算法
  7. nginx使用ssl模块配置HTTPS支持 &lt;转&gt;
  8. BZOJ_2259_ [Oibh]新型计算机 _最短路
  9. P1880 [NOI1995]石子合并[区间dp+四边形不等式优化]
  10. ACM学习历程——UVA442 Matrix Chain Multiplication（栈）