vue 简易toDoList

最新推荐文章于 2020-06-30 11:48:56 发布
最新推荐文章于 2020-06-30 11:48:56 发布
阅读量98 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/rlann/p/7198864.html
版权

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>

 

转载于:https://www.cnblogs.com/rlann/p/7198864.html

weixin_30425949
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用vue做一个简单的todolist
fdark的博客
04-18 3518
IMweb vue
Vue学习7----demo练习，实现todolist效果2
翟浩浩Android专栏
04-01 239
效果图： 源码（复制即可运行） App.vue <!--demo练习1，实现todolist效果1--> <template> <div id="app"> <input type="text" v-model='todo' /><button @click="add()">增加</button> &l...
vue实现简易留言板（todolist）
01-07
使用bootstrap布局的vue.js入门小demo
vue实现简单的todolist
sinat_29289673的博客
11-23 294
点击预览   &lt;div id="app"&gt; &lt;input type="text" class="form-control" v-model="task"&gt; &lt;button class="btn btn-default" v-on:click="add"&gt;添加&lt;/butt
Vue（三）两个案例（todolist，tableBar）
diya4575的博客
12-11 137
待办事项： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
todolist:vue 简易版todolist
04-27
待办事项清单一个Vue.js项目构建设置# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and ...
Vuejs 实现简易 todoList 功能 与 组件实例代码
10-18
在本示例中，我们将探讨如何使用 Vue.js 创建一个简单的 todoList 应用，并了解组件的基本概念。 首先，让我们深入理解 todoList 的实现。在这个例子中，我们创建了一个包含输入框、提交按钮和列表的简单界面。`v-...
前端+vue2+todoList项目
07-26
该项目是一个非常简易的vu2项目,适合刚学习完vue2,或者是刚接触vue2的新手使用。项目虽然小，但是涉及了最常用的增删改查功能，以及各组件之间进行传数据的方式。父子组件，自定义事件。全局事件总线等，有一定的练...
[vue] todoList,待办项列表实现
蹲在人生路上的那只猫
07-21 2064
直接上图吧！ 然后上代码啦！
vue 练手demo todolist
小羽向前跑
06-20 1167
最终效果： 组件代码： <template> <div class="todolist"> <!-- header --> <div class="header"> 任务计划列表 </div> <!-- 添加任务 -->...
vue2的todolist入门小项目的详细解析
08-30
本篇文章主要介绍了vue2的todolist入门小项目的详细解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-todolist-example学习
weixin_33827965的博客
03-16 85
2019独角兽企业重金招聘Python工程师标准>>> ...
vue实现todolist功能(初学者适用)
Banality_human_workers的博客
06-30 4542
todolist案例实现: 完成 todolist首先要清楚 基本的业务逻辑 需要完成哪些功能： 添加功能（添加后可存储在本地 即刷新后页面中仍有数据） 删除功能（删除后可以存储在页面） 修改功能（同上） 下面直接上代码： <div class="header"> <!-- 头部 --> <span class="logo">ToDoList</span> <!-- keydown 键盘事件 按下enter直接添加
第3章-Vue.js 指令扩展 和 todoList练习
weixin_34273481的博客
09-07 165
一、学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二、todoList练习效果展示 2.1、效果图展示 2.2、todoList练习效果展示代码 <head> <meta charset="UTF-8"> <titl...
vue.js 练手--简单ToDoList
a79149884的博客
08-10 302
小白自学前端，做个todolist练手（vue.js ）
Vue.js TodoList小案例
LitongZero的博客
08-27 520
使用Vue.js写的TodoList小案例。 完成功能：增加任务，修改任务状态，删除任务和清除已完成任务。 代码：（修改Vue引入，即可使用） &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;TodoList案例&a
vue 简单案例 todolist
weixin_43859703的博客
03-20 298
<template> <div id="app"> <div class="title"> <span class="text">TODOList</span> <input placeholder="请输入..." type="text" class="txtbox" @keydown="addList"&...
todolist--初学者练习使用vuejs方法
weixin_34292402的博客
11-13 117
我们都知道，现在Vuejs的前端开发的最火的三大框架之一，它极大地方便了我们的前端工作者的工作，这是笔者整理的一份用vue写的一个todolist的整个过程。 1.新建一个文件夹，配置环境变量 安装的命令行有： npm init -y npm i -S todomvc-app-css underscore vue 2.新建一个HTML文件...
初识 Vue(02)---( TodoList demo)
姜皓的博客
06-24 279
TodoList demo &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;TodoList&lt;/title&gt; &lt;script src = './vue.js'&g
vue实现todolist
最新发布
05-14
好的，下面是一个简单的Vue实现todolist的例子： 首先在HTML中定义一个输入框和一个按钮，用于添加待办事项： ``` <button @click="addTodo">Add ``` 然后在Vue实例中定义一个data属性newTodo，用于存储用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值