<!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. eslint 配合 git （husky）

    为了保证每次提交的 git 代码是正确的,为此我们可以使用 eslint 配合 git hook, 在进行git commit 的时候验证eslint规范 如果 eslint 验证不通过,则不能提交. ...

  2. git用远程库的内容覆盖本地

    git fetch --all 下载远程的库的内容到本地,不做任何的合并(怎么合并可以自己选择) git reset --hard origin/master 撤销本地.暂存区.版本库(用远程服务器的 ...

  3. GPIO设备虚拟文件结点的创建【转】

    本文转载自:http://blog.csdn.net/dwyane_zhang/article/details/6742066 所谓GPIO设备虚拟文件结点,就是方便用户在应用程序直接操纵GPIO的值 ...

  4. TopCoder SRM420 Div1 RedIsGood —— 期望

    题目链接:https://vjudge.net/problem/TopCoder-9915 (论文上的题) 题解: 更正:, i>0, j>0 代码如下: #include <ios ...

  5. POJ3450 Corporate Identity —— 后缀数组 最长公共子序列

    题目链接:https://vjudge.net/problem/POJ-3450 Corporate Identity Time Limit: 3000MS   Memory Limit: 65536 ...

  6. 51nod 1737配对

    题意:给定一个n个点的带边权树,  保证n是偶数,给这个树两两配对,使得配对后的点路径和最大,输出最大值. 其实是个很简单的题,但还是被绊了.这充分说明现在连简单题都做不来了555 单独考虑每条边.每 ...

  7. ssh_jar包选择

    1.struts2.3.29 + spring-framework-3.2.9.RELEASE +hibernate-distribution-3.6.10 * struts 所需jar 在:如下所示 ...

  8. zoj 3813 Alternating Sum（2014ACMICPC Regional 牡丹江站网络赛 E）

    1.http://blog.csdn.net/dyx404514/article/details/39122743 思路:题目意思很清楚了,这里只说思路. 设区间[L,R],区间长度为len=(R-L ...

  9. [原创]java开发实现word在线编辑及流转

    OA公文流转系统主要用于处理企业日常工作中内外部的各种公文,包括了公文的拟稿.审批.传阅.公告.归档,多层上级可以对下级撰写的公文进行逐级审批或修改,待最高级人员确认无误后即可进行核稿和发文等操作,最 ...

  10. BaseServlet优化Servlet，实现类似struts2的一些简单效果

    package cn.itcast.web.servlet; import java.io.IOException; import javax.servlet.ServletException; im ...