<!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. Android 进程增加存活率

    引用 : http://geek.csdn.net/news/detail/68515

  2. UVA10294 Arif in Dhaka (First Love Part 2) —— 置换、poyla定理

    题目链接:https://vjudge.net/problem/UVA-10294 题解: 白书P146~147. 为什么旋转i个间距,就有gcd(i,n)个循环,且每个循环有n/gcd(i,n)个元 ...

  3. js中得~~是什么意思/JS按位非(~)运算符与~~运算符的理解分析

    其实是一种利用符号进行的类型转换,转换成数字类型 ~~true == 1 ~~false == 0 ~~"" == 0 ~~[] == 0 ~~undefined ==0 ~~!u ...

  4. 算法（Algorithms）第4版 练习 1.3.18

    1.3.18 Deletes from the list the node immediately following x.

  5. struts2标签（转）

    Struts2 标签库讲解   要使用Struts2的标签,只需要在JSP页面添加如下一行定义即可: <%@ taglib prefix="s" uri="/str ...

  6. codeforces 706D D. Vasiliy's Multiset(trie树)

    题目链接: D. Vasiliy's Multiset time limit per test 4 seconds memory limit per test 256 megabytes input ...

  7. 2015推荐的Android框架

    一.Guava Google的基于java1.6的类库集合的扩展项目,包括collections, caching, primitives support, concurrency libraries ...

  8. ACM学习历程——UVA540 Team Queue（队列，map：Hash）

    Description   Team Queue   Team Queue  Queues and Priority Queues are data structures which are know ...

  9. IHE-PIX 备注

    IHE给出了各个Actor之间如何通讯的建议: 1.       应用程序通讯时必须用MLLP包装或者解析. 2.       客户端建立连接后,服务器端必须用此连接进行应答.客户端可以继续用此连接启 ...

  10. 【转】Pro Android学习笔记（四）：了解Android资源（下）

    处理任意的XML文件 自定义的xml文件放置在res/xml/下,可以通过R.xml.file_name来获取一个XMLResourceParser对象.下面是xml文件的例子: <rootna ...