<!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>

Vue实现任务列表效果的更多相关文章

  1. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue页面切换效果（slide效果切换）

    最近碰到一个需求,单页应用里面页面切换的效果需要做成跟轮播图滑动slide一样,让这个页面在切换时感觉是一个页面.反复琢磨的vue里面的transition,最终将实现的核心代码贴出来.这里实现的是上 ...

  3. vue 左右滑动效果

    个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架 ...

  4. vue购物车动画效果

    使用动画的三个函数 v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter=&q ...

  5. vue实现选中效果

    前情提要 好久没有写Vue了,略有生疏,这个东西还是得多用.下午看到一个需求,选择相册图片作为轮播图显示.接口返回相册列表,用户选一下再扔回去.直到我看到e.target.className我就知道这 ...

  6. vue学习第二天：Vue跑马灯效果制作

    分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...

  7. router使用以及vue的动画效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. vue图片放大镜效果

    原作者地址:https://github.com/lemontree2000/vue-magnify 经测试,原插件在使用时有bug,即在预览时进行鼠标滚动,导致遮罩层计算错误.我已修复该bug,特分 ...

  9. vue过渡动画效果

    1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...

随机推荐

  1. HTML5模拟衣服撕扯效果

    在线演示 本地下载

  2. Winfrom和控制台中static修饰方法的问题

    在编写winform程序时,当写完方法名后,按Shift+Alt+F10(vs自动生成方法框架)后生成的方法是实例方法,而当手动为该方法添加static修饰符后,程序仍能正常运行. 而在控制台中,写完 ...

  3. 金色酒类企业dedecms模板

    金色酒类企业dedecms模板,网站模板,dedecms模板. 模板地址:http://www.huiyi8.com/sc/7276.html

  4. 搭建LoadRunner中的场景(二) 集合点

    Rendezvous: 这个单词来自于法语,军队集合的意思.LoadRunner中是指各虚拟用户在同一时刻完成指定的操作. 一. 集合点设置步骤 1. 在脚本中需要测试并发性能的操作之前加入集合点. ...

  5. FAQrobot 聊天机器人笔记

    follow: https://github.com/ofooo/FAQrobot  这是一个简单的基于问词匹配的自动问答,获取与用户问句Q1最匹配的知识库中的问句Q2,Q2的答案就是Q1的答案. 首 ...

  6. <十八>UML核心视图动态视图之协作图

    一:协作图 --->描述了对象间交互的一种模式.它通过对象之间的连接和它们相互发送的消息来显示参与交互的对象 --->协作图可以有对象和主角实例,以及描述它们之间关系和交互的连接和消息.通 ...

  7. Educational Codeforces Round 17 颓废记

    又被虐了... (记一次惨痛的Codeforces) 好不容易登上去了Codeforces,22:35准时开打 第一题,一看:这不SB题嘛?直接枚举因数上啊.9min才过掉了pretest 第二题.. ...

  8. bzoj 1731 [Usaco2005 dec]Layout 排队布局——差分约束

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1731 对差分约束理解更深.还发现美妙博客:http://www.cppblog.com/me ...

  9. Words Gems

    所有的东西都来自抄袭.来自学习.不同的是用新的方法做其他公司做过的事情.很多公司做同样的事情,但只有一家公司最成功.你要发现一个有需求的服务,并做得比别人更好,而不是比别人更早.

  10. poj3281Dining——网络流匹配

    题目:http://poj.org/problem?id=3281 网络流做图中的匹配,注意为了限制每头牛只匹配一种食物和一种饮料,要把牛拆成两个点,之间连边权为1的边. 代码如下: #include ...