vue实现简单的ToDoList

最新推荐文章于 2022-03-19 14:12:48 发布
原创 最新推荐文章于 2022-03-19 14:12:48 发布 · 230 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个使用Vue.js实现的任务列表应用，展示了如何利用Vue.js的响应式特性、指令和事件处理来创建一个动态更新的任务列表。应用包括添加任务、删除任务、标记任务为已完成的功能，并区分显示进行中和已完成的任务。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<script src="vue.js"></script>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0\css\font-awesome.css">
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist\css\bootstrap.css">

<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
header{
    background-color: black;
}
header h3{
    color: white;
    margin: 0;
    padding: 0;
    line-height: 54px;
}
.info{
    line-height: 54px;
}
.info input{
    display: inline-block;
}
main h3{
    color: black;
    margin: 0;
    padding: 0;
    line-height: 50px;
}
span{
    color: black;
    line-height: 50px;
    float: right;
}
</style>

<body>
<div id="app">
    <header class="col-md-12 col-xs-12">
        <div class="col-md-3 col-xs-0"></div>
        <div class="col-md-3 col-xs-4 title">
            <h3>ToDoList</h3>
        </div>
        <div class="col-md-3 col-xs-8 info">
            <input type="text" class="form-control addinput" v-on:keyup.enter="submit">
        </div>
        <div class="col-md-3 col-xs-0"></div>
    </header>
    <main>
        <div class="col-md-3 col-xs-0"></div>
        <div class="col-md-6 col-xs-12">
            <h3 class="col-md-11 col-xs-10"><strong>正在进行</strong></h3><span class="col-md-1 col-xs-2">{{todoList.length}}</span>
                <table class="table">
                    <tr v-for="(l,index) in todoList">
                        <td class="col-xs-1"><i class="fa fa-square-o" v-on:click="changeList(l,index)"></i></td>
                        <td class="col-xs-10">{{l.name}}</td>
                        <td class="col-xs-1"><i class="fa fa-close" v-on:click="deletetodo(index)"></i></td>
                    </tr>
                </table>
            <h3 class="col-md-11 col-xs-10"><strong>已经完成</strong></h3><span class="col-md-1 col-xs-2">{{doneList.length}}</span>
                <table class="table">
                    <tr v-for="l in doneList">
                        <td class="col-xs-1"><i class="fa fa-check-square-o"></i></td>
                        <td class="col-xs-10">{{l.name}}</td>
                        <td class="col-xs-1"><i class="fa fa-close" v-on:click="deletedone(index)"></i></td>
                    </tr>
                </table>
        </div>
        <div class="col-md-3 col-xs-0"></div>
    </main>
</div>
</body>
</html>

Vue实现简单ToDolist案例
Huang_DW的博客
07-01 596
Vue实现简单ToDolist案例 <template> <div> <div> <input type="text" v-model="inputValue" @keydown.enter="add"> <span @click="shaix" style="cursor: pointer;">筛选</span> <h3>正在进行({{noList}})</h3&
Vue3.0实现todolist
ll666888999的博客
03-31 1758
项目准备 Vue3.0环境搭建 1、官网安装node，进入node.js官网安装长期支持版 打开终端输入：node -v 如果出现node版本号，表明安装成功 安装node自带npm,包管理工具 输入npm -v 出现npm的版本号 2、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 输入cnpm -v 会出现一系列版本号，说明安装成功 3、安装vue环境：cnpm i -g vue @vue/cli 输入vue -
vue实现简单的todolist
sinat_29289673的博客
11-23 334
点击预览   &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
cc012812的博客
02-19 619
这里创建完app后，在浏览器的console中可以直接打印 var app = new Vue({ }) 如，app.$data.inputValue就可以打印出input框中的内容，app.$data.inputValue='123' 就可以直接修改Input框中的内容 这里的this.inputValue，指的就是data中的inputValue的内容。 点击按钮，然后根据I...
利用Vue方法实现一个简单的TODOlist
this_name_true的博客
01-08 492
效果如下：    代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.css"/&gt;
Vue实现简易TodoList
liaoai的博客
02-23 5142
文章目录TodoList案例分析App.vue功能实现：1.Header部分Header.vue2.List部分List.vue3.Item部分Item.vue4.Footer部分Footer.vue TodoList案例 （省略样式部分） 分析 分为四个组件 Header List Item Footer App.vue <template> <div id="root"> <div class="todo-container"> <div
vue实现todolist功能、todolist组件拆分及todolist的删除功能
10-17
在这个教程中，我们将探讨如何使用Vue实现一个基本的待办事项（TodoList）功能，包括组件拆分和删除功能。 首先，让我们看一个简单的TodoList功能的实现。在HTML中，我们有一个`<input>`元素和一个提交按钮，它们...
vue实现ToDoList简单实例
08-31
在本实例中，我们将探讨如何使用Vue.js创建一个简单的ToDoList应用，该应用包含添加任务、删除任务和全选删除功能。下面将详细阐述实现这个功能的关键步骤和涉及的技术。 首先，我们需要为页面添加基本的Bootstrap...
vue_todolist:#vue实现的todolist
05-16
"vue_todolist"是一个基于Vue.js实现的待办事项列表应用，旨在帮助开发者了解如何在实际项目中运用Vue的基本概念和技术。 在这个todolist应用中，我们可以学习到以下关键的Vue知识点： 1. **Vue实例**：每个Vue...
vue实现todolist笔记
weixin_45732235的博客
03-19 3341
文章目录前言一、静态页面二、初始化列表三、添加演示四、勾选演示五、删除演示六、底部统计演示七、底部交互演示所有代码总结 前言 使用Vue实现简单的todo-list案例 🌴学习Vue只用通过不断的练习，和使用代码才能够熟记，我跟着视频敲了一遍后，想着要自己再敲一遍，捋一下逻辑，让自己记得更熟。 一、静态页面 🌾首先已经有了todolist的静态页面的html以及css文件，想办法用组件来实现就要进行拆分，看着静态页面思考一下拆分几个子组件，最后都放入父组件App.vue 🌾分好之后，确定哪个组件包含其
Vue实现todolist简单版
日晞的博客
09-06 205
<!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"> <title>Document&l.
Vue实现简易todolist
大风起兮云飞扬
02-09 301
通过单击添加按钮，将输入框中的值添加到下面，可删除，也可重新编辑。具体效果如图： 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i...
vue 实现简单版本 todolist
咿呀咿呀呦~
06-24 433
昨天下午在记事本的功能上做了优化，做成了简单的 todolist，主要是来巩固一下vue的各种指令 以下是效果图 以上是简单版本的效果图，好啦，献上我的代码~欢迎大家踊跃提出建议 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <m
vue实现todoList
wang159477的博客
04-10 557
系列文章目录 1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加） 2、动态计算有几个未完成的任务 3、点击复选框，实现选中或不选中效果（即完成或未完成） 4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表 5、双击列表中的内容，可对列表内容进行编辑 编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑 如果想要取消修改，按esc键即可取消编辑 6、单击上面的所有任务、未完成任务、已完成任务，三个按钮可以切换任务列表 7、已经添加的
如何使用vue编写ToDoList
sslcsq的博客
12-20 261
ToDoList案列 <template> <div class="app"> ToDoList：<input type="text" placeholder="请输入todo" @keyup.enter="add()" v-model="title"> <!-- 这里使用键盘事件的修饰符回车事件 双向数据绑定--> ...
使用vuejs做一个todolist
dianpi2993的博客
05-10 157
在输入框内输入一个list，回车，添加到list列表中，点击列表中的项样式改变 1、index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my-first-vue-project</titl...
Vue - 用Vue写一个TodoList小栗子
kaven
11-07 1017
推荐：Vue学习汇总 Vue学习（五）- 用Vue写一个TodoList小栗子 需求 在输入框中输入计划，点击提交，可以加入List的最前面。 避免输入全是空格。 避免按钮点击的冒泡事件。 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>TodoList</title> <script src="./js/vue.js">&l
【11】前端实习：VUE 使用vue-cli做一个todolist （完整详细代码）
qq_40610760的博客
08-09 642
这是用命令行创建一个新vue项目 vue init webpack projectName cd projectName npm install npm run dev 首页是引用的 todolist.js的组件模板 然后新建一个组件： todolist.js <template> <div> <div...
初识 Vue(02)---( TodoList demo)
姜皓的博客
06-24 333
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记事本
本项目标题为“Vue小demo todoList记事本”，说明该项目是一个使用Vue.js框架实现的简单记事本应用。在该应用中，用户可以执行基础的记事功能，如添加事项、标记完成以及删除事项等。使用Vue框架能够帮助开发者快速...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值