待办事项

效果图

目录结构

详细代码

AddNew.vue

<template>
<div>
<input v-model="content"/>
<button @click="addList()">添加</button>
</div>
</template> <script>
export default {
name: "AddNew",
data() {
return {
content: ''
}
},
methods: {
addList() { if(!this.content) {
alert("请输入内容");
return;
}
//调用App.vue文件中的add方法
this.$emit("addFunc",{content: this.content});
this.content = ''
}
}
}
</script> <style>
input {
width: 300px;
height: 30px;
border-radius: 5px;
}
button {
width: 100px;
height: 40px;
border-radius: 5px;
background: forestgreen;
color: #fff;
margin-left: 10px;
letter-spacing: 5px;
}
</style>

TheList.vue

<template>
<ol >
<li v-for="(item, index) in list" :key="index" @click="selectDel(index)">{{item.content}}</li>
</ol>
</template> <script>
export default {
name:"TheList",
//props属性除了可以是一个数组外,还可以是一个对象
/*props: [
'list',
'flag'
],*/
props: {
list: {
type: Array,
required: true,
},
flag: {
type: Boolean,
default: true
}
},
methods: {
selectDel(index) {
if(this.flag) {
this.$emit('toDelFunc',index);
}else {
this.$emit('doDelFunc',index);
}
}
}
}
</script> <style>
</style>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ ] const router = new VueRouter({
routes
}) export default router

App.vue

<template>
<div>
<h2>TodoList</h2>
<AddNew @addFunc="add"></AddNew>
<hr />
<TheList :list="toList" @toDelFunc="toDelList"></TheList>
<hr />
<TheList :list="delList" @doDelFunc="doDelList" :flag="false"></TheList>
</div>
</template> <script>
//引入组件对象
import AddNew from './components/AddNew.vue';
import TheList from './components/TheList.vue';
export default {
data() {
return {
toList: [],
delList: []
}
},
methods: {
add(val) {
console.log(val)
this.toList.push(val);
},
toDelList(index) {
this.delList.push(this.toList.splice(index, 1)[0]);
},
doDelList(index) {
this.delList.splice(index, 1);
}
},
components: {
AddNew,
TheList
}
}
</script> <style> </style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router' Vue.config.productionTip = false new Vue({
router,
render: h => h(App)
}).$mount('#app')

使用vue实现简单的待办事项的更多相关文章

  1. jQuery模仿ToDoList实现简单的待办事项列表

    功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中:点击未完成事项前边的复选框后,该事项会出现在已完成列表中,反之亦然:点击删除按钮会删除该事项:双击事项可以修改事项的内容.待办事项的数 ...

  2. Javascript之网页版待办事项

    本文使用原生JS实现站点 http://www.todolist.cn/ 的基本功能. 其中页面的HTML布局和CSS样式取用原站,JS部分为自己编写. 效果图 完整代码 HTML.JS部分 < ...

  3. 青否云 - 小程序待办事项vue开源系统

    青否云最新开源系统:小程序待办事项 vue-demo 青否云 vue demo 下载地址:https://github.com/qingful/vue-demo 官网 http://cloud.qin ...

  4. Vuex 模块化实现待办事项的状态管理

    前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸 ...

  5. 青否云 - 小程序待办事项 wxapp开源系统

    青否云最新开源系统:小程序待办事项 wxapp-demo 青否云 小程序 demo 下载地址:https://github.com/qingful/wxapp-demo 官网 http://cloud ...

  6. 青否云 - 小程序待办事项 jquery开源系统

    青否云最新开源系统:小程序待办事项 jquery-demo 青否云 Jquery demo 下载地址:https://github.com/qingful/jquery-demo 官网 http:// ...

  7. Go For It ,一个灵活的待办事项列表程序

    导读 Go For It,是我们开源工具系列中的第十个工具,它将使你在 2019 年更高效,它在 Todo.txt 系统的基础上构建,以帮助你完成更多工作. 每年年初似乎都有疯狂的冲动想提高工作效率. ...

  8. 个人待办事项工具的设计和搭建(IFE前端2015春季 任务3)

    这是我几个月之前的项目作品,花了相当的时间去完善.博客人气不高,但拿代码的人不少,所以一直处于保密状态.没有公开代码.但如果对你有帮助,并能提出指导意见的,我将十分感谢. IFE前端2015春季 任务 ...

  9. react构建淘票票webapp,及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

随机推荐

  1. vs联合halcon——采集图像(实时采集与单次采集)

    摘要 在对vs进行环境配置好以后,就可以开始与halcon联合进行实战.本篇就对图像的采集进行总结.通过构建采集相机GrabImage类的三个方法实现图像的采集: open() 打开相机 grabim ...

  2. UGUI ScrollRect 鼠标滑动灵敏度调节

  3. 时光卷轴,Microsoft大事记

    Our mission is to empower every person and every organization on the planet to achieve more. 2021年6月 ...

  4. 温故知新,.Net Core遇见Postman(API Development),进阶分布式微服务高效调式

    什么是Postman 环境变量(Environments) 全局协议 描述 变量 初始值 当前值 请求协议 request_protocol http http 授权信息 描述 变量 初始值 当前值 ...

  5. Harbor镜像仓库

    Harbor镜像仓库 作者 刘畅 时间 2020-7-11 微信 目录 1.下载离线安装包 1 2.安装docker 1 3.安装docker-compose 2 4.自签TLS证书 2 4.1.创建 ...

  6. 企业管理CRM不只是客户录入系统

    企业在举办营销活动或者展会之后,将会收集到大量的客户信息,将这些信息有效地整理.完善.储存也是一个不小的工程.如果您的企业经常面遇到这样的情况,不妨使用Zoho CRM系统来帮您完成.但是,Zoho ...

  7. php漏洞 strcmp漏洞

    0x01: 背景:strcmp函数,参数是两个字符串,相等返回为零,大于,返回大于零,小于,返回小于零. 0x02: 如果传入的值,不是字符串的话,会报错,同时使得两个字符串直接相等,返回为零. 一般 ...

  8. Linux | 命令的参数

    命令的参数 格式:command parameters --> 命令参数 短参数 在短参数中,字母的大写效果是不同的,比如大写 T 和小写 t 的含义通常是不同的. 一个短参数 最常用的参数形式 ...

  9. JMeter之Throughput Controller吞吐量控制器

    吞吐量控制器,它是用来控制该控制器下面元件的执行次数,与控制吞吐量的功能无关.(注:用Constant Throughput Timer可以控制吞吐量tps) 作用:控制其子节点的执行次数与负载比例分 ...

  10. 在使用TCP协议进行消息发送时,对消息分帧

    成帧与解析 阅读 <java TCP/IP Socket 编程>第三章笔记 成帧技术(frame)是解决如何在接收端定位消息的首尾位置的问题.在进行数据收发时,必须指定消息接收者如何确定何 ...