简单实现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" ...
随机推荐
- [Flink]Flink1.6三种运行模式安装部署以及实现WordCount
前言 Flink三种运行方式:Local.Standalone.On Yarn.成功部署后分别用Scala和Java实现wordcount 环境 版本:Flink 1.6.2 集群环境:Hadoop2 ...
- [考试反思]1001csp-s模拟测试(b)：逃离
如你所见,b组题,除了NC乱入直奔T2抢了我一个首杀以外A层学过FFT的人都没有参加. 竞争压力很小,题又简单,所以就造就了6个AK. 然而并不计入总分,我仍然稳在第二机房. T1lyl16分钟切掉我 ...
- 识别手写数字增强版100% - pytorch从入门到入道(一)
手写数字识别,神经网络领域的“hello world”例子,通过pytorch一步步构建,通过训练与调整,达到“100%”准确率 1.快速开始 1.1 定义神经网络类,继承torch.nn.Modul ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- MySql: AUTO_INCREMENT
首先要在Column使用AUTO_INCREMENT (每张表只有一个列可以AUTO_INCREMENT): 以下示例取自MySql官网(http://dev.mysql.com/doc/refman ...
- pat 1042 Shuffling Machine（20 分）
1042 Shuffling Machine(20 分) Shuffling is a procedure used to randomize a deck of playing cards. Bec ...
- 06_K-近邻算法
k-近邻算法 算法介绍 定义: 如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一类别,则该样本也属于这个类别. 计算距离公式:欧式距离 (两点之间距离) 需要做标准化 ...
- 前端 vue单页面应用刷新网页后vuex的state数据丢失的解决方案（转载）
最近接手了一个项目,前端后端都要做,之前一直在做服务端的语言.框架和环境,前端啥都不会啊. 突然需要前端编程,两天速成了JS和VUE框架,可惜还是个半吊子.然后遇到了一个困扰了一整天的问题.一直调试都 ...
- ZeroC ICE的远程调用框架 ThreadPool
ThreadPool提供Reactor/Proactor服务,并且强偶合了Reactor(反应器)/Proactor(前摄器).不同于Reactor/Proactor使用线程池 进行事件处理的设计.如 ...
- mybatis精讲(三)--标签及TypeHandler使用
目录 话引 XML配置标签 概览 properties 子标签property resource 程序注入 settings 别名 TypeHandler 自定义TypeHandler EnumTyp ...