vue+bootstrap简易响应式任务管理表：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no"/>

        <link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css"/>

        <script src="bs/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="bs/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

        <script src="vue.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            window.onload = function(){

                var vm = new Vue({

                    el:".container",

                    data:{

                        datalist:[],

                        username:'',

                        age:'',

                        nowindex:-1

                    },

                    methods:{

                        add:function(){

                            if(this.username.trim()!=''&& this.age.trim()!=''){

                                this.datalist.push({

                                    name:this.username,

                                    age:this.age

                                });

                            }

                            this.username='',

                            this.age=''

                        },

                        res:function(){

                            this.username='',

                            this.age=''

                        },

                        del:function(num){

                            if(num==-2){

                                this.datalist = [];

                            }else{

                                this.datalist.splice(num,1);

                            }

                        }

                    }

                })

            }

        </script>

    </head>

    <body>

        <div class="container">

            <form>

                <form class="form-group">

                    <label for="username">任务</label>

                    <input type="text" name="username" id="username" class="form-control" placeholder="请输入事件" v-model="username"/>

                </form>

                <br />

                <form class="form-group">

                    <label for="age">时间</label>

                    <input type="text" name="age" id="age" class="form-control" placeholder="请输入时间" v-model="age"/>

                </form>

                <div class="form-group">

                    <input @click="add()" type="button" class="btn btn-primary" value="添加"/>

                    <input @click="res()" type="reset" class="btn btn-danger"  value="重置" />

                </div>

            </form>

            <table class="table table-bordered table-hover">

                <caption class="h3 text-info">to do list</caption>

                <tr class="text-center">

                    <th>序号</th>

                    <th>任务</th>

                    <th>时间</th>

                    <th>选项</th>

                </tr>

                <tr class="text-center" v-for="value in datalist">

                    <td>{{$index+1}}</td>

                    <td>{{value.name}}</td>

                    <td>{{value.age}}</td>

                    <td>

                        <input data-toggle="modal" data-target="#sure" type="button" class="btn btn-primary btn-sm" value="删除" @click="nowindex=$index"/>

                    </td>

                </tr>

                <tr v-show="datalist.length!=0">

                    <td class="text-right" colspan="4">

                        <input data-toggle="modal" data-target="#yes" type="button" class="btn btn-primary btn-sm" value="删除全部" @click="nowindex=-2"/>

                    </td>

                </tr>

                <tr v-show="datalist.length==0">

                    <td colspan="4" class="text-center">

                        <p>暂无任务</p>

                    </td>

                </tr>

            </table>

            <!--模态框-->

            <div class="modal fade" id="sure">

                <div class="modal-dialog">

                    <div class="modal-content">

                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal">

                                <span>&times;</span>

                            </button>

                            <h3>你确定要删除吗</h3>

                        </div>

                        <div class="modal-body text-right">

                            <input type="button"  data-dismiss="modal" class="btn btn-info btn-sm" value="取消"/>

                            <input type="button" data-dismiss="modal" class="btn btn-primary btn-sm" value="确定" @click="del(nowindex)"/>

                        </div>

                    </div>

                </div>

            </div>

            <div class="modal fade" id="yes">

                <div class="modal-dialog">

                    <div class="modal-content">

                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal">

                                <span>&times;</span>

                            </button>

                            <h3>确定清空吗</h3>

                        </div>

                        <div class="modal-body text-right">

                            <input type="button"  data-dismiss="modal" class="btn btn-info btn-sm" value="取消"/>

                            <input type="button" data-dismiss="modal" class="btn btn-primary btn-sm" value="确定" @click="del(nowindex)"/>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </body>

</html>

vue 简易toDoList的更多相关文章

  1. vue demo todo-list

    html <input type='text' v-model="todoItem" v-on:keyup.enter='addItem'> <ul> &l ...

  2. vue 实现todolist，包含添加，删除，统计，清空，隐藏功能

    vue 实现todolist,包含添加,删除,统计,清空,隐藏功能 添加:生成列表结构(v-for+数组).获取用户输入(v-model).通过回车新增数据(v-on+.enter) 删除:点击删除指 ...

  3. vue案例todolist备忘录

    项目效果:https://cinderellastory.github.io/todolist/dist/index.html#/ 项目链接:https://github.com/Cinderella ...

  4. Vuejs 实现简易 todoList 功能 与 组件

    todoList 结合之前 Vuejs 基础与语法 使用 v-model 双向绑定 input 输入内容与数据 data 使用 @click 和 methods 关联事件 使用 v-for 进行数据循 ...

  5. Vue完成TodoList案例

    写一个简单的TodoList的更实用(文末有彩蛋). 一,使用VUE-CLI脚手架快速搭建一个框架 利用VUE-CLI来自动生成我们项目的前端目录及文件,方法: npm install -g vue- ...

  6. 用vue做todolist

    <template> <div class="hello"> <div style="height:25px;line-height:25p ...

  7. Vuex + localStorage + html实现简易todolist

    1.项目结构 2.Vuex,什么是Vuex? 官方文档上的介绍是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种 ...

  8. 基于Vue简易封装的快速构建Echarts组件 -- fx67llQuickEcharts

    fx67llQuickEcharts A tool to help you use Echarts quickly! npm 组件说明 这本来是一个测试如何发布Vue组件至npm库的测试项目 做完之后 ...

  9. vue - Vue脚手架/TodoList案例

    今天做了一个案例,可以好好做做能够将之前的内容结合起来,最主要的是能对组件化编码流程有一个大概的清晰认知,这一套做下来,明天自己再做一遍复习一下,其实组件化流程倒是基本上没什么问题了,主要是很多vue ...

随机推荐

  1. nginx installl

    参考http://jingyan.baidu.com/album/4b07be3cbbb54848b380f322.html?picindex=5 安装nginx需要的依赖包 wget 下载 编译安装 ...

  2. eclipse部署web项目至本地的tomcat但在webapps中找不到问题

    一.发现问题 在eclipse中新建Dynamic Web Project,配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并 ...

  3. Dtree 添加 checkbox 复选框 可以默认选中

    一:目标 要实现用一个树形结构的展示数据,每个节点(除了根节点)前有一个checkbox,同时,点击父节点,则子节点全选或者全不选,当选中了全部子节点,父节点选中:如下图所示: 同时可以在创建的时候, ...

  4. 学习 KMP 算法

    KMP 算法是用来处理字符串匹配问题的.也就是给你两个字符串,你需要回答:B 串是否是 A 串的子串(或 B 串在 A 串中出现的位置).比如,字符串 A = “ i am student ”, 字符 ...

  5. 算法竞赛入门经典5.1 从c到c++

    这个章节主要是讲述了一些c++的特性,在这里面,对我用处最大的应该就是字符串吧.首先是getline,getchar,stringstream的使用了吧. 首先介绍这三个函数. 1. getline函 ...

  6. DevOps - 配置管理 - Puppet

    uppet总结 一.基础知识 1. Puppet是开源的基于Ruby的系统配置管理工具,依赖于C/S的部署架构.Puppet这样的自动化配置管理工具可以帮助系统管理员更加方便的完成多台服务器的升级软件 ...

  7. hprose 1.0（rpc 框架） - 执行时序图

  8. JZOJ 4735. 最小圈

    Description 对于一张有向图,要你求图中最小圈的平均值最小是多少,即若一个圈经过k个节点,那么一个圈的平均值为圈上k条边权的和除以k,现要求其中的最小值 Input 第一行2个正整数,分别为 ...

  9. 如何使用pyinstaller打包32位的exe

    说明:原来安装的python为64位,故安装的pyinstaller和打包后的exe都为64位.而64位的exe文件在32位的win7操作系统下是无法执行的,显示不兼容.网上查询发现,简单(可能不方便 ...

  10. 学习python第四天 列表

    模块的导入是使用 import sys#导入模块sysprint(sys.path)#打印环境变量,可能存在的目录print(sys.argv)#打印脚本的名字,相对路径 import os os.s ...