实现效果

完成功能

Vue 的基础案例
Vue 的组件
Vue 父组件向子组件传值
Vue 子组件向父组件传值
Vue 的动态样式绑定
Layui 的弹窗实践

代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Todo List</title><link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"><style>ul li {list-style: circle !important;}.finished {text-decoration: line-through;}</style>
</head>
<body>
<div id="todoApp" style="margin:1.5% 2% 0 2%"><hr><div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="schedule"><div class="layui-progress-bar" lay-percent="100%"></div></div><hr><div class="layui-form-item"><div class="layui-input-inline"><input type="text" name="input" autocomplete="off" class="layui-input" v-model="todoValue"></div><button style="float: left;" type="button" class="layui-btn layui-btn-radius layui-btn-normal"v-on:click="addItem">提交</button><button style="float: left;" type="button" class="layui-btn layui-btn-radius layui-btn-normal" disabledv-on:click="finish">完成一件</button></div><div><ul><!--        <li v-for="item in todoList">{{item}}</li>--><my-todo-item v-for="(item,index) in todoList"v-bind:item="item"v-bind:index="index"v-on:finish="finishItemHandler"></my-todo-item></ul></div></div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">let $, element, layer;layui.use(['element', 'layer', 'jquery'], function () {$ = layui.jquery;layer = layui.layer;element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块});Vue.component('my-todo-item', {template: "<li style='margin-left: 1rem;;margin-top: 1rem;' v-bind:class='{finished: item.finish}'>" +"{{ item.value }} " +"<button v-on:click='finishItem' style='margin-left: 1rem' type='button' class='layui-btn layui-btn-radius layui-btn-normal'>{{item.finish ? '取消完成':'完成'}}" +"</button></li>",props: ['item', "index"],methods: {finishItem: function () {this.$emit("finish", this.index);}}});let todoApp = new Vue({el: "#todoApp",data: {todoValue: "",todoList: [],index: 0,accomplish: 0},methods: {addItem: function () {if (this.todoValue.length !== 0) {const item = {id: this.index++,value: this.todoValue,finish: false};this.todoList.push(item);// 清空输入框this.todoValue = "";// 重新计算进度条this.calcSchedule();} else {layer.msg('输入能容为空。。。', {icon: 5});}},finish: function () {if (this.accomplish < this.todoList.length) {this.accomplish++;this.calcSchedule();}},calcSchedule: function () {// 重新计算进度条const schedule = this.accomplish / this.todoList.length * 100;//设置进度element.progress('schedule', schedule.toFixed(2) + '%');},finishItemHandler: function (index) {this.todoList[index].finish = !this.todoList[index].finish;if (this.todoList[index].finish) {this.accomplish++;} else {this.accomplish--;}this.calcSchedule();}}});
</script>
</html>

传值解读

此处todoApp可看做是父组件，my-todo-item是子组件

todoApp通过my-todo-item中的 props 将需要的值传递到my-todo-item中

my-todo-item中button按钮触发的finishItem事件向父组件发布了一个finish事件，并携带了 index 这个参数，而父组件使用v-on指令，监听了组件的finish事件并将该事件交由finishItemHandler函数处理

Vue实现Todo List相关推荐

Vue模仿todo超详细讲解（附源码）
Vue模仿todo超详细讲解(附源码) 一.todo基本DOM结构二.todo功能需求分析 1.新增任务 2.点击变成完成状态 3.点击删除 4.双击进入编辑以及修改保存 5.底部的状态筛选 6.l ...
for循环一定要指定键么 vue_第 2 篇：上手 Vue 展示 todo 列表
作者:HelloGitHub-追梦人物追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutor ...
vue编写to-do list源码
前端重于积累,下次使用不迷路. 纯vue代码话不多说,直接上效果图: 源码附上: <template><div class="bgBody"><!- ...
Vue实现todo清单，登录注册功能，待办事项
一.作品介绍 1.作品用到的技术栈开发工具 : Vscode 语言:Vue2.html.css.js 2.作品实现功能注册登录页面对待办事项的增删改操作显示当前时间和倒计时等功能本地存储功能 ...
vue实现todo功能（一）：搭建vue-webpack环境
前言我最开始因为项目原因接触的是react,对于我这种美观狂而言,react中难以调解的css让我十分抓狂,说是在写页面,因为不能写自己的样式,像是在拼凑页面,没意思.于是我开始了解vue这种将cs ...
Vue Vuex todo举例
https://github.com/chenhaifeng2016/VuexDemo
vue和react相同点_我在React和Vue中创建了相同的应用程序。这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
Vue精简版风格指南
前面的话 Vue官网的风格指南按照优先级(依次为必要.强烈推荐.推荐.谨慎使用)分类,且代码间隔较大,不易查询.本文按照类型分类,并对部分示例或解释进行缩减,是Vue风格指南的精简版组件名称 [组件 ...
学java要学vue吗_学vue之前必看
Vue学习 1.1 vue.js是什么? Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于 ...

Vue实现Todo List

基于Vue实现的Todo List

实现效果

完成功能

代码

传值解读

Vue实现Todo List相关推荐

最新文章

热门文章