<!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. EASYARM-IMX283 编译uboot和uImage

    本文是按照IMX283配套光盘的流程重新编译uboot和uImage将光盘中的gcc-4.4.4-glibc-2.11.1-multilib-1.0_EasyARM-iMX283.tar.bz2 解压 ...

  2. SQL 数据类型 numeric varchar char

    Numeric(10,2) 指字段是数字型,长度为10 小数为两位的 简要描述一下SQL中的五种数据类型:字符型,文本型,数值型,逻辑型和日期型 字符型 VARCHAR VS CHAR VARCHAR ...

  3. MIS系统中的报表测试

    报表功能的基本要求,就是通过查询/统计/分析,提供用户所需的准确的数据.如果无法实现这个基本功能,则报表完全失去意义. 对于用户来说,报表可以直接影响到他们的决策,例如可能因为报表对销售和库存情况反映 ...

  4. 灰色大气企业html5模板

    灰色大气企业html网页模板是一款以灰色为背景的大气简洁企业html5网站模板. 下载地址:http://www.huiyi8.com/sc/10860.html

  5. 【Java】CookieStore 类使用示例

    CookieStore 是 Java API 中用来处理 HTTP 客户端的 Cookie 存储策略的类.psd素材 1. [代码]WebClient.java      01import java. ...

  6. BZOJ 1657 [Usaco2006 Mar]Mooo 奶牛的歌声：单调栈【高度序列】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1657 题意: Farmer John的N(1<=N<=50,000)头奶牛整齐 ...

  7. JS 删除数组中指定的某个元素的方法

    //首先创建函数方法 Array.prototype.indexOf = function(val){ for(var i=0;i<this.length;i++){ if(this[i] == ...

  8. CentOS 7编译安装Tengine+PHP+MariaDB全程笔记

    安装环境:CentOS7 3.10.0-693.5.2.el7.x86_64 准备源码包: pcre-8.41.tar.gz openssl-1.0.1h.tar.gz zlib-1.2.11.tar ...

  9. SpringBoot_01_正确、安全地停止SpringBoot应用服务

    二.参考资料 1.正确.安全地停止SpringBoot应用服务

  10. Mac环境下安装node.js、npm、express

    一:node.js安转 方法一:下载node.js for Mac 地址: http://nodejs.org/download/ 直接下载 pkg的,双击安装,一路点next,很容易就搞定了. 安装 ...