简单实现TodoList
Todolist实例
储备知识js的splice的用法
实例逻辑
1 在data里面做一个存一条条留言的列表，往里面添加或者删除留言内容。
2 做一个变量和input双向绑定，然后做一个点击事件把这个变量添加到哪个装留言的列表。
2 for循环这个列表，循环出内容和索引
3 给每个循环出来的li绑定点击事件，并且传入索引，依据这个索引操作data里的列表
详细代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>todolist</title>
<style>
li:hover {
cursor: pointer;
color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="msg_val">
<button @click="sendMsg">留言</button>
<ul>
<li v-for="(msg, i) in msgs" @click="deleteMsg(i)">{{ msg }}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
// msgs: ['第一条留言', '第二条留言'],
msgs: localStorage.msgs ? localStorage.msgs.split(',') : [],
msg_val: '',
},
methods: {
sendMsg () {
// 1）数据为空直接结束
if (!this.msg_val) return;
// 2）数据添加到留言数组中
// this.msgs.push(this.msg_val); // 尾增
this.msgs.unshift(this.msg_val); // 首增
// 数据同步到前台数据库
localStorage.msgs = this.msgs;
// 3）清空输入框
this.msg_val = '';
},
deleteMsg (index) {
// console.log(index);
this.msgs.splice(index, 1);
// 数据同步到前台数据库
localStorage.msgs = this.msgs;
}
}
})
</script>
</html>
简单实现TodoList的更多相关文章
- 使用React并做一个简单的to-do-list
1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...
- 利用前端三大件（html+css+js）开发一个简单的“todolist”项目
一.介绍 todolist,即待办事项.在windows android ios上参考微软家出的那个To-Do应用,大概就是那样的.我这个更简单,功能只有“待办” “已完成”两项,并且是在浏览器打开的 ...
- 原生JavaScript实现一个简单的todo-list
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- vue基于组件实现简单的todolist
把todolist拆分为header.footer.list三个模块 index文件 <!DOCTYPE html> <html lang="en"> &l ...
- 初识Vue，简单的todolist
vue开发源码:https://vuejs.org/js/vue.js todolist代码: <!DOCTYPE html> <html lang="en"&g ...
- 利用原生js的Dom操作实现简单的ToDoList的效果
效果如下: 前端及js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- vue结合element-ui做简单版todolist
结合element-ui首先需要npm安装element-ui npm i element-ui -S: 然后在入口文件中引入: import ElementUI from 'element-ui'; ...
- vue 做一个简单的TodoList
目录结构 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- vue之简单的todoList（一）
<!-- 根组件 --> <!-- vue的模板内,所有内容要被一个根节点包含起来 --> <template> <div id="app" ...
随机推荐
- 关于JQUery.parseJSON()函数的知识札记
JSON数据也许大家都很陌生,而对我来讲属于半成品,由于项目问题,做web虽然用的是JSON数据格式传输,但是关于解析这一块还真不知道该注意什么,更不知道它是如何解析的,由于最近要把串口通信协议与此一 ...
- [专题总结]矩阵树定理Matrix_Tree及题目&题解
专题做完了还是要说两句留下什么东西的. 矩阵树定理通俗点讲就是: 建立矩阵A[i][j]=edge(i,j),(i!=j).即矩阵这一项的系数是两点间直接相连的边数. 而A[i][i]=deg(i). ...
- [考试反思]0811NOIP模拟测试17：虚无
(sdfz未参加,也就是一共就51个人) 也不粘具体排名了,只写分数线. []220 []201 []194 [5]181 [10]141 [15]132 [20]122 [25]116 [30]10 ...
- NOIP模拟 37
啊哈这次没什么智障低错丢rank什么的托词了STO 发现好像110我就拿满了.. 水平不行..只会简单题qaq T1 可以树上启发式合并水过(普通分治也行) T2 我连那么显然的 一劳永逸的容斥都没想 ...
- NOIP模拟测试13
考得还算可以,T3还有提升空间(没看清题&&样例没过 拿了4分). 期望得分:80+40+0=120 实际得分:80+85+4=169 一脸黑线.....是数据比较水的原因,T2分都比 ...
- Flink中发送端反压以及Credit机制(源码分析)
上一篇<Flink接收端反压机制>说到因为Flink每个Task的接收端和发送端是共享一个bufferPool的,形成了天然的反压机制,当Task接收数据的时候,接收端会根据积压的数据量以 ...
- 「BZOJ1576」[Usaco2009 Jan] 安全路经Travel------------------------P2934 [USACO09JAN]安全出行Safe Travel
原题地址 题目描述 Gremlins have infested the farm. These nasty, ugly fairy-like creatures thwart the cows as ...
- Project Euler 54: Poker hands
在纸牌游戏中,一手包含五张牌并且每一手都有自己的排序,从低到高的顺序如下: 大牌:牌面数字最大 一对:两张牌有同样的数字 两对:两个不同的一对 三条:三张牌有同样的数字 顺子:所有五张牌的数字是连续的 ...
- Linux常用命令复习
1> 查看文件信息:ls ls是英文单词list的简写,其功能为列出目录的内容,是用户最常用的命令之一,它类似于DOS下的dir命令. Linux文件或者目录名称最长可以有265个字符,“.”代 ...
- SQL Server 2014：在修改表的内容时，提示“此单元格已更改，尚未将更改提交到数据库”，怎么处理？
那一行上的属性为“不允许为null”的所有字段都填上对应信息,按回车键或者点击下一行任意一个单元格便会自动将更改的信息提交到数据库.