vue简单todolist制作

最新推荐文章于 2022-11-03 15:48:05 发布
最新推荐文章于 2022-11-03 15:48:05 发布
阅读量391 收藏 2
点赞数
分类专栏： vue 文章标签： vue制作简易todolist
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42635130/article/details/90610955
版权

html页面代码

<!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>Document</title>
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="./index.css">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="page-group">
            <div class="page page-current">
                <!-- header -- start -->
                <header class="bar bar-nav">
                    <a class="icon icon-star pull-left"></a>
                    <a class="icon icon-edit pull-right" @click="add_todo_flag=!add_todo_flag"></a><!-- 控制input框的出现与消失 -->
                    <h1 class="title">todo_list</h1>
                </header>
                <!-- header -- end -->

                <!-- content -- start -->
                <div class="content">
                    <input
                     type="text" 
                     v-show="add_todo_flag"     
                     v-model = "add_todo_input"
                     @focus="getFocus"
                     @keyup.enter="addTodoItem"
                     ><!-- 控制input框的出现消失，双向数据绑定，框内信息，按下回车键push方法向数组添加数据渲染界面 -->
                    <div 
                    class="card" 
                    v-for = "(todo,index) in newTodos"
                    :key = "todo.id"><!-- 根据不同的选项渲染不同的界面 -->
                        <div class="card-content">
                            <div class="card-content-inner">{{ todo.task }}</div>
                            <div class="my-btn-box pull-right">
                                <button
                                 class="button button-success"
                                 @click = "todo.flag = !todo.flag"
                                 :class="[todo.flag?'button-fill':'']"
                                 ><!-- flag控制是否打钩 -->
                                    <i class="icon icon-check"></i>
                                </button>

                                <button class="button button-danger"
                                @click = "check( index )"><!-- 判断是否打钩，打钩直接删除，没打勾弹出选项框 -->
                                    <i class="icon icon-remove"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- content -- end -->

                <!-- footer --start -->
                <footer>
                    <ul>
                        <li class="circle"
                        v-for="btn in btns"
                        :key="btn.id"
                        :class="['circle-'+btn.mold,btn.name===type?'circle-fill':'']"
                        @click="type=btn.name">{{btn.content}}</li><!-- 根据type改变来使点击的和不点击的产生不同效果 -->
                    </ul>
                </footer>

                <!-- footer --end -->

                <!-- mask --start -->
                <div class="mask-box"
                v-show = "mask_flag"
                @click = "mask_flag = false"
                ><!-- mask_flag控制是否出现黑幕 -->
                    <div class="mask-box-bg"></div>
                    <div class="card">
                        <div class="card-content">
                            <div class="card-content-inner">您确定要删除？？</div>
                            <div class="my-btn-box pull-right">
                                <button class="button button-warning button-fill"
                                @click = "remove( active_index )"><!-- 因为处于for循环之外，取不到index值，所以用active_index存下当前index值，此处使用 -->
                                    确定
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- mask --end -->

            </div>
        </div>
    </div>

</body>
<script src="./index.js"></script>

</html>

css代码

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 解决高度塌陷 */
.card{
    overflow: hidden;
}
/* 卡片下方按钮 */
.my-btn-box{
display: flex;
padding: 10px;
}
.my-btn-box button{
    margin: 5px;
}
/* 黑幕 */
.mask-box{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index:1000;
}
.mask-box-bg{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: black;
    opacity: .5;
}
/* 黑幕中间盒子 */
.mask-box .card{
    width: 80%;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border-radius: 10px 
}
/* 底部 */
footer{
    position: fixed;
    width: 100%;
    height: 80px;
    left: 0;
    bottom:10px;
}
footer ul{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
}
/* 底部按钮 */
footer ul li{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* background: red */
}
footer ul li.circle{
   text-align: center;
   line-height: 80px
}
footer ul li.circle.circle-success{
   border: 1px solid green;
   color: green
}
 footer ul li.circle.circle-success.circle-fill{   
   background: green;
   color: white
}
footer ul li.circle.circle-primary{
    border: 1px solid blue;
    color: blue
 }
  footer ul li.circle.circle-primary.circle-fill{   
    background: blue;
    color: white
 }
 footer ul li.circle.circle-warning{
    border: 1px solid orangered;
    color: orangered
 }
  footer ul li.circle.circle-warning.circle-fill{   
    background: orangered;
    color: white
 }

js代码

new Vue({
    el: '#app',
    data: {/* 原始数据  */
        todos: [
            {
                id : 1,
                task : '唱',
                flag: true/* 用于判断是否勾选 */
            },
            {
                id : 2,
                task : '跳',
                flag: true
            },
            {
                id : 3,
                task : 'rapper',
                flag: true
            }
        ],
        add_todo_flag:false,/* 控制input输入框的出现与消失 */
        add_todo_input:'请输入代办事项',/* input输入框原始提示信息及输入内容 */
        mask_flag:false,/* 控制遮罩的消失与出现 */
        active_index : 0, /* 保存index,在mask点击确定按钮的时候使用 */
        btns:[{
            id:1,
            content:'A',
            name:'all',// all  全部的任务
            mold:'success' //类型
        },{
            id:2,
            content:'F',//finish  完成了的任务
            name:'finish',
            mold:'primary'
        },{
            id:3,
            content:'U',
            name:'unfinish',//unFinish 未完成的任务
            mold:'warning'
        }],
        type:'all'
    },
    methods: {
        check( index ){
            this.active_index = index;
            /* 判断当前是否勾选 */
            if(this.todos[index].flag){
                this.remove(index)
            }else{
                this.mask_flag = true
            }     
        },
        remove( index ){/* 删除当前项 */
            this.todos.splice(index,1)
        },
        addTodoItem () {/* 添加卡片块 */
            this.todos.push({
                id : this.todos.length + 1,
                task : this.add_todo_input,
                flag : true
            });
            this.add_todo_input = '';/* 添加完成后输入框内容变为空 */
            this.add_todo_flag=false;/* 添加完成后输入框消失 */
        },
        getFocus(){/* 获得焦点提示信息消失 */
            this.add_todo_input=''
        }
    },
    computed:{
        allTodos(){
            return this.todos;/* 所有项目 */
        },
        finishTodos(){
            return this.todos.filter(item =>{
                return item.flag && item/* flag为true也就是打了勾的项目 */
            })
        },
        unfinishTodos(){
            return this.todos.filter(item =>{
                return !item.flag && item/* flag为false也就是没打勾的项目 */
            })
        },
        newTodos(){/* 点击不同按钮渲染不同界面 */
            switch (this.type) {
                case 'all':
                    return this.allTodos
                    break;
                case 'finish':
                    return this.finishTodos
                    break;
                case 'unfinish':
                    return this.unfinishTodos
                    break;
                default:
                    break;
            }
        }
    }
})
前端xqf
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue实现todolist笔记
weixin_45732235的博客
03-19 3180
文章目录前言一、静态页面二、初始化列表三、添加演示四、勾选演示五、删除演示六、底部统计演示七、底部交互演示所有代码总结 前言 使用Vue实现简单的todo-list案例 🌴学习Vue只用通过不断的练习，和使用代码才能够熟记，我跟着视频敲了一遍后，想着要自己再敲一遍，捋一下逻辑，让自己记得更熟。 一、静态页面 🌾首先已经有了todolist的静态页面的html以及css文件，想办法用组件来实现就要进行拆分，看着静态页面思考一下拆分几个子组件，最后都放入父组件App.vue 🌾分好之后，确定哪个组件包含其
2021-07-27 使用vue制作todolist（任务计划表）
m0_50632711的博客
07-27 1196
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Vue实现todolist
07-13
利用vue框架，实现todolist MVC DEMO，基本实现必备功能，其中使用到了element-ui
Vue——制作toDoList
NanChen的博客
10-29 581
效果如下： 实现代码： HTML部分： <div id="todo" class="todo"> <div class="header"> <section> <!-- input部分 --> <label for="title">ToDoList</label> <inpu.
使用vue制作一个简单的todolist
Heavy_Dream的博客
12-18 778
水一下vue官方文档传送门：https://cn.vuejs.org/v2/api/ Demo基于vue build第一个项目上修改 目录结构 App.vue文件 &lt;template&gt; &lt;div id="app"&gt; &lt;h1&gt;{{title}}&lt;/h1&gt; &lt;h2 v-text="title"&gt;&
vue实现todoList
wo139472的博客
07-11 535
三部分实现todoList //todoHeader组件 <template> <div> //数据双向绑定,trim去除空格,keyup实现按回车键添加一条todo列表 <input v-model.trim="text" @keyup.enter="addTodo"> <button @click="addTodo">addtodo</button> </div> </
利用vue做一个简单的todolist
qq_50280292的博客
11-03 2180
vue
基于Vue制作todolist列表
05-23
基于Vue制作todolist列表
Vue实现TodoList任务列表案例
m0_57101855的博客
05-28 2106
一、初始化vite项目： 二、梳理项目结构： 1）重置index.css中的全局样式； 2）重置App.vue组件的代码结构 三、封装TodoList组件： 1）创建并注册TodoList组件 2）渲染列表组件（基于boorstrap) 1.在 main.js 入口文件中，导入 bootstrap.css 样式表。 2.在 App 组件中通过 list 属性，将数据传递到 TodoList 组件之中，为了接受外界传递过来的列表数据，需要在 TodoList 组件中声明props 属性。 3
vue实现简易留言板（todolist）
01-07
使用bootstrap布局的vue.js入门小demo
React入门 制作简单的todolist
zem
09-27 404
首先，我直接使用create-react-app来搭建一个简单的项目 目录如下 将src中除了App.js，index.js，serviceWorker.js之外的文件删除，目录改为如图 component下存放组件，assets下存放静态文件，这里为了方便我只用一个css文件 重新编辑index.js和App.js如下 // index.js import React from 'react...
Vue实现简单的todolist
qq_46362763的博客
05-09 1229
1、在输入框中输入内容后点击添加，即可把内容添加到下面的列表中（如果内容为空则不添加） 2、点击复选框，实现选中或不选中效果（即完成或未完成） 3、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表 4、已经添加的列表任务，即便关闭浏览器或者电脑，下次打开任务还在列表中（用到了本地存储） 直接上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&
toDoList的做法
weixin_51415327的博客
09-10 570
以下部分实现了将数据存储到本地的操作 读取和存储本地数据的方法 function getDate() { var data = localStorage.getItem("todolist"); if (data !== null) { // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的 return JSON.parse(data); } else { retur...
Vue实现简易TodoList
liaoai的博客
02-23 4909
文章目录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
LYR 的博客
02-18 305
v-model数据双向绑定，在 data里面注册 v-on:click=“function” function在 methods 里面注册 v-for 遍历列表元素 1.实现一个todo List <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>...
VUE实现简易todos
二琳爱吃肉的博客
06-26 430
效果图 初始状态 add a todo 选中已完成 清空 代码实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>todos</title> <script type="text/javascript" src="./js/vue.js" ></script> </head> &lt
Vue实现 TodoList
X-77
12-29 6200
手把手教你完成TodoList，定制专属待办事项！
vue学习-03--使用vue制作简单的todolist
一个热爱学习的前后攻城狮
01-20 361
使用vue制作简单的todolist 点击在GitHub上查看demo 在data内创建数据合集 data() { return { title: "this is a todo list",//标题 items: [//tuod 事项数据合集 { label: "coding",//事
用vue制作todolist
最新发布
04-27
好的，下面是用Vue制作todolist的步骤： 1. 创建Vue实例 首先需要在HTML文件中引入Vue.js库，然后创建一个Vue实例，代码如下： ``` <div id="app"> <input v-model="newTodo" @keyup.enter="addTodo"> <ul> <li v-for="(todo, index) in todos" :key="index"> {{ todo }} <button @click="removeTodo(index)">X</button> </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> new Vue({ el: '#app', data: { newTodo: '', todos: [] }, methods: { addTodo() { if (this.newTodo.trim() !== '') { this.todos.push(this.newTodo.trim()); this.newTodo = ''; } }, removeTodo(index) { this.todos.splice(index, 1); } } }); </script> ``` 2. 添加数据和方法 在Vue实例中，需要定义数据和方法。数据包括一个用于输入新任务的变量 `newTodo` 和一个用于存储所有任务的数组 `todos`。方法包括添加任务的 `addTodo` 和删除任务的 `removeTodo`。 ``` data: { newTodo: '', todos: [] }, methods: { addTodo() { if (this.newTodo.trim() !== '') { this.todos.push(this.newTodo.trim()); this.newTodo = ''; } }, removeTodo(index) { this.todos.splice(index, 1); } } ``` 3. 绑定数据和事件 在HTML文件中，需要使用Vue的指令来绑定数据和事件。使用 `v-model` 指令将输入框和 `newTodo` 变量绑定在一起，使用 `v-for` 指令将任务列表和 `todos` 数组绑定在一起，使用 `@keyup.enter` 指令监听回车键，使用 `@click` 指令监听删除按钮的点击事件。 ``` <input v-model="newTodo" @keyup.enter="addTodo"> <ul> <li v-for="(todo, index) in todos" :key="index"> {{ todo }} <button @click="removeTodo(index)">X</button> </li> </ul> ``` 4. 样式美化 最后，可以对todolist进行样式美化，使其更加美观。 ``` <style> #app { font-family: Arial, sans-serif; margin: 50px auto; max-width: 600px; } input[type="text"] { padding: 10px; border: none; border-bottom: 1px solid #ccc; font-size: 16px; width: 100%; box-sizing: border-box; outline: none; } ul { list-style: none; padding: 0; } li { margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } button { background-color: #ff4d4d; color: #fff; border: none; border-radius: 50%; height: 30px; width: 30px; font-size: 14px; display: flex; justify-content: center; align-items: center; outline: none; cursor: pointer; } </style> ``` 完成以上四个步骤后，就可以得到一个简单的todolist应用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值