Vue-40、Vue中TodoList案例

1、MyHeader.vue

<template><div class="todo-header"><input type="text" placeholder="请输入你的任务名称,按回车键确认" v-model="title" @keyup.enter="add"></div>
</template><script>import {nanoid} from 'nanoid'export default {name: "MyHeader",props:['addTodo'],data(){return{title:''}},methods:{add(){if(!this.title.trim())  alert("输入不能为零") ;const obj = {id:nanoid(),title: this.title,done:false};this.addTodo(obj);this.title=''},}}
</script><style scoped>/*header*/.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}
</style>

2、MyList.vue

<template><ul class="todo-main"><my-item v-for="todobj in todos" :key="todobj.id"  :todo="todobj" :changeDone="changeDone" :deleteToto="deleteToto"></my-item></ul>
</template>
<script>import MyItem from './MyItem'export default {name: "MyList",components:{MyItem},props:['todos','changeDone','deleteToto'],computed:{}}
</script><style scoped>/*main*/.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;}
</style>

3、MyItem.vue

<template><li><label><input type="checkbox" :checked="todo.done" @change="changecheckItem(todo.id)"/><span>{{todo.title}}</span></label><button class="btn btn-danger" @click="removeTodo(todo.id)">删除</button></li>
</template>
<script>export default {name: "MyItem",props:['todo','changeDone','deleteToto'],data(){return{}},methods:{changecheckItem(id){this.changeDone(id);},removeTodo(id){if(confirm('是否删除')){this.deleteToto(id);}}}}
</script><style scoped>/*item*/li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover button{display: block;}
</style>

4、MyFoot.vue

<template><div class="todo-footer"  v-show="total" ><label><input type="checkbox"  v-model="isAll" ></label><span><span>已完成{{totalDone}}</span> / 全部{{todos.length}}</span><button class="btn btn-danger" >清除已完成任务</button></div>
</template>
<script >export default {name: "MyFooter",props:['todos','changeTodoDones'],computed:{total(){const  a = this.todos.length;return a>0 ? true : false;},totalDone(){const number = this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0),0);return number;},isAll:{get(){return this.totalDone === this.todos.length && this.todos.length > 0;},set(value){this.changeTodoDones(value);}},},}
</script><style scoped>/*footer*/.todo-footer {height: 40px;line-height: 40px;padding-left: 6px;margin-top: 5px;}.todo-footer label {display: inline-block;margin-right: 20px;cursor: pointer;}.todo-footer label input {position: relative;top: -1px;vertical-align: middle;margin-right: 5px;}.todo-footer button {float: right;margin-top: 5px;}
</style>

5、App.vue

<template><div id="app"><div class="todo-container"><div class="todo-wrap"><my-header :addTodo="addTodo"></my-header><my-list :todos="todos" :changeDone="changeDone" :deleteToto="deleteToto"></my-list><my-footer :todos="todos" :changeTodoDones="changeTodoDones"></my-footer></div></div></div>
</template>
<script>
import  MyHeader from './components/MyHeader'
import  MyFooter from './components/MyFooter'
import  MyList from './components/MyList'export default {name: 'App',components: {MyHeader,MyList,MyFooter},data(){return{todos:[{id:'001',title:'吃饭',done:true},{id:'002',title:'睡觉',done:false},{id:'003',title:'喝酒',done:true}]}},methods:{addTodo(obj){this.todos.unshift(obj);},changeDone(id){this.todos.forEach((p)=>{if(p.id === id){p.done = !p.done}})},deleteToto(id){this.todos=this.todos.filter(p=>p.id !== id);},changeTodoDones(value){console.log(value);this.todos.forEach(p=>{p.done=value;});}}
}
</script>
<style >/*base*/body {background: #fff;}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
</style>

6、main.js

//该文件是整个项目的入口文件
//引入Vue
import Vue from 'vue'
//引入APP组件,他是所有组件的父组件
import App from './App.vue'//关闭Vue是生产提示
Vue.config.productionTip = false;
//应用插件//创建Vue实例对象---vm
new Vue({render: h => h(App),
}).$mount('#app');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/648667.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文件操作与IO(一些小项目)

在指定目录中寻找文件 扫描指定目录,并找到名称对应的所有文件(不包含目录). import java.io.File; import java.util.Scanner;public class Project1 {public static void main(String[] args) {//1.输入必要的信息Scanner sc new Scanner(System.in);System.out.println(&…

微信小程序API

API 小程序 的API基本上都是以wx.开头的。 (1) 基础 wx.getSystemInfoSync wx.getSystemInfo (2) 路由 wx.switchTab wx.reLaunch wx.redirectTo wx.navigateTo wx.navigateBack (3) 界面交互&#xff1a; wx.showToast wx.showModal wx.showLoading wx.showAct…

一款颜值与实力并存的翻页时钟(免费)

FliTik是一款颜值与实力并存的翻页时钟&#xff0c;安卓端是完全免费的&#xff0c;无任何广告&#xff0c;极简风 &#xff0c;软件默认是12小时制&#xff0c;可以在设置中启用24小时制&#xff0c;并且还支持设置显示秒钟、日期、文案&#xff0c;滴答声和语音报时。 支持横…

数据分析的理念、流程、方法、工具(上)

一、数据的价值 1、数据驱动企业运营 从电商平台的「猜你喜欢」到音乐平台的「心动模式」&#xff0c;大数据已经渗透到了我们生活的每一个场景。不论是互联网行业&#xff0c;还是零售业、制造业等&#xff0c;各行各业都在依托互联网大数据&#xff08;数据采集、数据存储、…

C++ 设计模式之责任链模式

【声明】本题目来源于卡码网&#xff08;卡码网KamaCoder&#xff09; 【提示&#xff1a;如果不想看文字介绍&#xff0c;可以直接跳转到C编码部分】 【设计模式大纲】 【简介】 --什么是责任链模式&#xff08;第21种设计模式&#xff09; 责任链模式是⼀种行为型设计模式&am…

ffmpeg 实用命令 -- 设置预览图

在为视频文件设置预览图&#xff08;缩略图&#xff09;之前&#xff0c;我们首先要准备这样一张图片。FFmpeg 支持用 thumbnail 过滤器自动从视频中抽取一张预览图。它会从头到尾以 thumbnailn 中的 n &#xff08;默认为 100&#xff09;数量的帧为扫描步长来抽取预览图。 #…

C语言实现希尔排序算法(附带源代码)

希尔排序 希尔排序&#xff0c;也称递减增量排序算法&#xff0c;是插入排序的一种更高效的改进版本。希尔排序是非稳定排序算法。 希尔排序是基于插入排序的以下两点性质而提出改进方法的&#xff1a; 插入排序在对几乎已经排好序的数据操作时&#xff0c;效率高&#xff0…

Java PDFBox 提取页数、PDF转图片

PDF 提取 使用Apache 的pdfbox组件对PDF文件解析读取和转图片。 Maven 依赖 导入下面的maven依赖&#xff1a; <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.30</version> &l…

基于Docker、Minikube在PC端构建K8S试验环境

在桌面电脑上使用Docker和Minikube构建Kubernetes&#xff08;K8S&#xff09;试验环境&#xff0c;为学习和测试提供了一个理想的平台。Docker的容器化技术允许在隔离的环境中运行应用&#xff0c;而Minikube则简化了在单节点上部署和管理Kubernetes集群的过程。这种组合使得个…

数字图像处理:图像内插

图像内插 内插通常在图像放大、缩小旋转和几何校正等任务中使用。内插是用已知数据来估计未知位置的值的过程下面用—个简单的例子开始这—主题的探讨。假设大小为500500像素的—幅图像要放大1.5倍即放大到750750像素。一种简单的放大方法是&#xff0c;创建—个大小为750750像…

Apipost-cli、Jenkins持续集成配置

安装 Apipost-cli npm install -g apipost-cli 运行脚本 安装好Apipost-cli后&#xff0c;在命令行输入生成的命令&#xff0c;即可执行测试用例&#xff0c;运行完成后会展示测试进度并生成测试报告。 Jenkins配置 Apipost cli基于Node js运行 需要在jenkins上配置NodeJs依…

eNSP 实验 两台AR配置同网段

实验1&#xff1a;eNSP 两台AR配置同网段 目的&#xff1a;创建两台AR&#xff0c;配置IP互相ping通 拓扑结构&#xff1a; 首先创建一个AR3260 然后创建一个AR2220 然后同轴电缆连接一下 先配置AR2220。 1、切管理员&#xff1a;system-view 进入千兆位以太网 0/0/0 interf…

MIT_线性代数笔记:第 29 讲 奇异值分解

目录 如何实现用矩阵数学语言描述这一过程举例 本讲介绍奇异值分解&#xff08;Singular value decomposition&#xff09;&#xff0c;简称 SVD。这是矩阵最终也是最好的分解&#xff0c;任意矩阵可分解为 A U Σ V T AUΣV^T AUΣVT&#xff0c;分解结果为正交矩阵 U&#x…

2024 axios封装 包括请求拦截、错误码等

1.新建 codeMessage.ts export default {200: "服务器成功返回请求的数据。",201: "新建或修改数据成功。",202: "一个请求已经进入后台排队&#xff08;异步任务&#xff09;。",204: "删除数据成功。",400: "发出的请求有错误…

Android中C++层fstream用法详解

fstream用于读写文件内容 ifstream用于读文件内容 ofstream用于写内容到文件 读本文章前&#xff0c;请读一下C 文件和流 | 菜鸟教程 目录 1. 打开文件open 2. 返回当前指针位置tellg, tellp 3. 设置文件读位置指针seekg 4. 设置文件写位置指针seekp 5. 如何在文件…

Axios 中不同的 responseType 选项

Axios 中不同的 responseType 选项&#xff1a; json&#xff1a; 描述&#xff1a; 这是默认设置。它表示服务器响应预计是 JSON 格式的。使用示例&#xff1a; axios.get(/api/data, { responseType: json }); text&#xff1a; 描述&#xff1a; 它表示服务器响应预计是纯…

day31_HTML

今日内容 0 复习昨日 1 表格标签 2 表单标签【重要】 3 框架标签 0 复习昨日 Javaweb开发,前端,服务器,数据库 前端,要学习HTML,CSS,JavaScript,JQuery HTML是用来编写网页的一种编程语言 语法 由各种标签组成,标签是尖括号<>,一般都是成对儿出现,前面叫做开标签,后面…

时间序列(Time-Series)Crossformer_EncDec.py代码解析

import torch import torch.nn as nn from einops import rearrange, repeat from layers.SelfAttention_Family import TwoStageAttentionLayer #用于合并时间序列的不同片段 class SegMerging(nn.Module): #初始化方法&#xff0c;参数包含模型维度d_model、窗口大小win…

GO——recover

定义 panic 改变程序控制流立即停止当前函数剩余代码&#xff0c;调用defer 只会执行当前协程的defer recover 可以终止panic造成的程序崩溃只能在defer中发挥作用 package mainimport ("fmt""time" )func main() {defer func() {fmt.Println("ma…

excel中多行合并后调整行高并打印

首先参考该文&#xff0c;调整全文的行高。 几个小技巧&#xff1a; 1.转换成pdf查看文件格式 2.通过视图--》分页预览&#xff0c;来确定每页的内容&#xff08;此时页码会以水印的形式显示&#xff09; 3. 页面布局中的&#xff0c;宽度可以选为自动&#xff0c;因为已经是…