使用vue实现简单的待办事项
待办事项
效果图
目录结构
详细代码
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实现简单的待办事项的更多相关文章
- jQuery模仿ToDoList实现简单的待办事项列表
功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中:点击未完成事项前边的复选框后,该事项会出现在已完成列表中,反之亦然:点击删除按钮会删除该事项:双击事项可以修改事项的内容.待办事项的数 ...
- Javascript之网页版待办事项
本文使用原生JS实现站点 http://www.todolist.cn/ 的基本功能. 其中页面的HTML布局和CSS样式取用原站,JS部分为自己编写. 效果图 完整代码 HTML.JS部分 < ...
- 青否云 - 小程序待办事项vue开源系统
青否云最新开源系统:小程序待办事项 vue-demo 青否云 vue demo 下载地址:https://github.com/qingful/vue-demo 官网 http://cloud.qin ...
- Vuex 模块化实现待办事项的状态管理
前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸 ...
- 青否云 - 小程序待办事项 wxapp开源系统
青否云最新开源系统:小程序待办事项 wxapp-demo 青否云 小程序 demo 下载地址:https://github.com/qingful/wxapp-demo 官网 http://cloud ...
- 青否云 - 小程序待办事项 jquery开源系统
青否云最新开源系统:小程序待办事项 jquery-demo 青否云 Jquery demo 下载地址:https://github.com/qingful/jquery-demo 官网 http:// ...
- Go For It ,一个灵活的待办事项列表程序
导读 Go For It,是我们开源工具系列中的第十个工具,它将使你在 2019 年更高效,它在 Todo.txt 系统的基础上构建,以帮助你完成更多工作. 每年年初似乎都有疯狂的冲动想提高工作效率. ...
- 个人待办事项工具的设计和搭建(IFE前端2015春季 任务3)
这是我几个月之前的项目作品,花了相当的时间去完善.博客人气不高,但拿代码的人不少,所以一直处于保密状态.没有公开代码.但如果对你有帮助,并能提出指导意见的,我将十分感谢. IFE前端2015春季 任务 ...
- react构建淘票票webapp,及react与vue的简单比较。
前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
随机推荐
- 基于ABP落地领域驱动设计-04.领域服务和应用服务的最佳实践和原则
目录 系列文章 领域服务 应用服务 学习帮助 系列文章 基于ABP落地领域驱动设计-00.目录和前言 基于ABP落地领域驱动设计-01.全景图 基于ABP落地领域驱动设计-02.聚合和聚合根的最佳实践 ...
- Redis之Sentinel
Redis的主从复制模式下,一旦主节点由于故障不能提供服务,需要人工将从节点晋升为主节点,同时还要通知应用方更新主节点地址,对于很多应用场景这种故障处理的方式是无法接受的.可喜的是Redis从 2.8 ...
- [JLOI2011]飞行路线题解
题目描述 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0到n-1,一共有m种航线,每种航线连接两个城市,并且航线有一定的 ...
- 如何管理MongoDB的用户和权限
管理用户的创建及使用 创建用户的函数是db.createUser({...}),创建用户时通常需要为该用户添加权限,如read.readWrite权限. 可添加的权限以及说明: 权限 作用 read ...
- 前端笔记:Html页面常用元素
Html页面由基本几个元素(标签)组成 html.head.body.foot(很少使用). html是整个页面的父级元素,内部包括head.body.foot子类标签. head是页头,及页面的头部 ...
- 1.3.7、通过QueryParam匹配
server: port: 8080 spring: application: name: gateway cloud: gateway: routes: - id: guo-system4 uri: ...
- redis学习笔记(一)——windows下redis的安装与配置
前言 很久没有写东西了(.......我的水平就是记个笔记),北漂实习的我,每天晚上回来都不想动,但是做为社会主义接班人的我,还是要时刻给自己充充电,趁着年轻,趁着日渐脱发的脑袋还没有成为" ...
- 26. Remove Duplicates from Sorted Array*(快慢指针)
description: Given a sorted array nums, remove the duplicates in-place such that each element appear ...
- Redis+Lua解决高并发场景抢购秒杀问题
之前写了一篇PHP+Redis链表解决高并发下商品超卖问题,今天介绍一些如何使用PHP+Redis+Lua解决高并发下商品超卖问题. 为何要使用Lua脚本解决商品超卖的问题呢? Redis在2.6版本 ...
- IP地址详解
讲之前了解一些网络设备的作用: 交换机:组建局域网 路由器:连接内外网 网关:一个网络的出口(Gate Way = GW)一般网关在路由器上 局域网(也称内网) 一个简单的局域网的基本组成设备:交换机 ...