二四、vue实现todolist

最新推荐文章于 2022-03-19 14:12:48 发布
最新推荐文章于 2022-03-19 14:12:48 发布
阅读量287 收藏
点赞数
分类专栏： vue 文章标签： todolist JavaScript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zm06201118/article/details/71189758
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <script src="lib/jquery-1.7.2.js"></script>
    <script src="lib/bootstrap.js"></script>

    <script src="vue.js"></script>
    <script>
        window.onload =function () {
            new Vue({
                el:'#app',
                data:{
                    myData:[
                    ],
                    username:'',
                    age:'',
                    delate:'确认删除吗??'
                },
                methods:{
                    add:function () {
                        this.myData.push({
                            name:this.username,
                            age:this.age,
                            nowI:-100
                        })
                        this.username='',
                            this.age=''
                    },
                    remove:function (n) {
//                        this.myData.splice(n,1);
                        if(n==-2){
                            this.myData=[];
                        }else{
                            this.myData.splice(n,1);
                        }

                    },
                    all:function () {
                        this.delate='确认删除全部吗??'
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id='app' class="container">
        <form role="form">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" class="form-control" placeholder="输入用户名" v-model=username>
            </div>
            <div class="form-group">
                <label for="age">年　龄:</label>
                <input type="text" id="age" class="form-control" placeholder="输入年龄" v-model=age>
            </div>
            <div class="form-group">
                <input v-on:click='add()' type="button" value="添加" class="btn btn-primary">
                <input type="reset" value="重置" class="btn btn-danger">
            </div>
        </form>
        <hr>
        <table class="table table-bordered table-hover">
            <caption class="h2 text-info">用户信息表</caption>
            <tr class="text-danger">
                <th class="text-center">序号</th>
                <th class="text-center">名字</th>
                <th class="text-center">年龄</th>
                <th class="text-center">操作</th>
            </tr>
            <tr class="text-center" v-for="item in myData">
                <td>{{$index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                    <button v-on:click='nowI=$index' class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>
                </td>
            </tr>

            <tr v-show='myData.length!=0'>
                <td colspan="4" class="text-right">
                    <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click='all()' >删除全部</button>
                </td>
            </tr>
            <tr v-show='myData.length==0'>
                <td colspan="4" class="text-center text-muted">
                    <p>暂无数据....</p>
                </td>
            </tr>
        </table>

        <!--模态框 弹出框-->
        <div role="dialog" class="modal fade bs-example-modal-sm" id="layer" data-index={{nowI}}>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">{{delate}}</h4>
                    </div>
                    <div class="modal-body text-right">
                        <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
                        <button v-on:click='remove(nowI)' data-dismiss="modal" class="btn btn-danger btn-sm">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
夏河始溢
关注
专栏目录
vue学习笔记---vue实现ToDoList
青椒盖饭的博客
03-31 411
ToDoList初级功能描述: 增加任务:通过在文本框中输入任务内容,点击添加按钮,任务会自动添加到任务列表之中. 实现思路:vue的思想是根据MVVM设计思想,也就是说,当程序中的数据被改变的时候,则视图上的对应内容也会自动发生变化. 主要使用到vue的一下几个几个指令: v-model:创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据...
vue-基础项目-todolist实现
qq_33094147的博客
04-01 4228
vue-基础项目-todolist实现 源代码地址：https://github.com/Lituzi/vue-miniProject-ToDoList 实现功能 在文本框输入后按enter添加待办事项 添加后显示在待办事项中 完成后勾选check框，从待办事项中移除，显示在已完成中 待办事项和已完成的计数功能 删除单条待办事项 按键clear清除所有事项 保存在本地localStorage中 vue实现 创建vue-cli脚手架项目 步骤 npm install --global vue-cli
toDoList：ToDoList（HTML，CSS，JS）
02-21
待办事项清单 TodoList的（HTML，CSS，JS）请在这里- 超级简单的待办事项清单，可让您添加，编辑或删除“待办事项”。 受启发
TodoLIst
qq_45566354的博客
03-18 235
上午 8：20-910:00 数据库视频 10:00-11:10 软考试题和题库 11:10-11:40 算法 下午 2;30-4:30 数据库视频 4:30- 5:40 软考视频和题库 算法 晚上 7;30-9:30 数据库视频 9:30-10:30 软考视频和题库 10:00-10:30 背六级单词 ...
用jQuery–实现todolist待办事项清单
01-08
效果图 实现todolist整体思路： 思路图如果看着不方便 js代码里面已经做好详细注释 ToDoList—最简单的待办事项列表 ToDoList 正在进行 已经完成 Copyright :copyright: 2014 todolist.cn css代码 @media screen and (max-device-width: 620px) { section { width: 96%; padding: 0 2%;
待办事项列表todoList程序
12-21
使用jQuery及javascript，配合HTML5的本地存储localStorage，实现待办事项列表todoList的页面及程序控制逻辑，完成todolist程序的编写。
jQuery编写的本地todolist
11-08
jQuery编写的本地todolist 适合初学jQuery的新手尝试的一个小项目 涉及很多方面 写完以后能够大大提高对jQuery代码的理解和认知
vue实现todolist功能、todolist组件拆分及todolist的删除功能
10-17
在这个教程中，我们将探讨如何使用Vue实现一个基本的待办事项（TodoList）功能，包括组件拆分和删除功能。 首先，让我们看一个简单的TodoList功能的实现。在HTML中，我们有一个`<input>`元素和一个提交按钮，它们...
vue实现todolist笔记
weixin_45732235的博客
03-19 3209
文章目录前言一、静态页面二、初始化列表三、添加演示四、勾选演示五、删除演示六、底部统计演示七、底部交互演示所有代码总结 前言 使用Vue实现简单的todo-list案例 🌴学习Vue只用通过不断的练习，和使用代码才能够熟记，我跟着视频敲了一遍后，想着要自己再敲一遍，捋一下逻辑，让自己记得更熟。 一、静态页面 🌾首先已经有了todolist的静态页面的html以及css文件，想办法用组件来实现就要进行拆分，看着静态页面思考一下拆分几个子组件，最后都放入父组件App.vue 🌾分好之后，确定哪个组件包含其
Vue实现todolist删除功能
08-27
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个基本的待办事项列表（Todo List）应用，特别是关注删除功能的实现。Vue.js是一个轻量级的前端JavaScript框架，以其响应式数据绑定和组件化特性而受到广泛欢迎...
vue实现ToDoList简单实例
08-31
总的来说，Vue.js实现的ToDoList应用是一个很好的学习项目，它展示了Vue.js的基本用法，如数据绑定、事件处理和条件渲染。通过这个实例，开发者可以深入了解Vue.js如何与HTML、CSS和JavaScript协作，创建动态且交互...
Vue实现todolist
07-13
利用vue框架，实现todolist MVC DEMO，基本实现必备功能，其中使用到了element-ui
jQuery实现简易TodoList
liaoai的博客
03-01 495
文章目录todolist案例html结构功能分析 todolist案例 html结构 功能 功能一： 文本框里面输入内容，按下回车，就可以生成待办事项。 功能二： 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。 功能三： 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。 功能四： 但是本页面内容刷新页面不会丢失。 功能五： 删除事项 功能六： 统计事件个数 分析 对于功能四，需要用到本地存储localStorage，不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中。
jq实现todolist
weixin_45077672的博客
05-26 408
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link .
VUE--事件和生命周期
zhangrenliang的博客
03-21 3787
一、事件冒泡 方法一、使用event.cancelBubble = true来组织冒泡            methods:{        show1:function(ev){            console.log(ev);            alert(1);            ev.cancelBubble=true;   /*阻止冒泡*/    
用jQuery--实现todolist待办事项清单
xiaofiy的博客
04-04 1277
效果图 实现todolist整体思路： 思路图如果看着不方便 js代码里面已经做好详细注释 html代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta nam...
jQuery实现todolist
牛先森家的博客
08-16 1296
jQuery实现todolistjQuery实现todolistjshtmlcss效果图 jQuery实现todolist 1、本地存储localStorage 2、jQuery实现交互 js $(function () { // alert(11); // 1. 按下回车 把完整数据 存储到本地存储里面 // 存储的数据格式 var todolist = [{title: "xxx", done: false}] load(); $("#title").on("keydown", f
关于ToDolist 的增删改查 用jQuery来实现
this_name_true的博客
05-29 1646
代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;script type="text/javascript" src="js/jquery-1.11.0.js" &gt;&lt;/script&gt; &lt;titl
三六、vue中使用animate.css
梅某某
08-01 9709
1.npm install animate.css –save2.main.js中引入 import animate from ‘animate.css’ Vue.use(animate) 3.页面中使用 <style type="text/css"> p { width: 300px; height: 300px; background: red; margin: 10
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、付费专栏及课程。

余额充值