简单实现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" ...
随机推荐
- 真正的打包scrapy单文件(不包含cfg)
前置:https://www.cnblogs.com/luocodes/p/11827850.html 解决最后一个问题,如何将scrapy真正的打包成单文件 耗了一晚上时间,今天突然有灵感了 错误分 ...
- 你了解MySQL中的日志吗？
MySQL中有两类非常重要的日志,一类是redo log(重做日志),一类是bin log(归档日志) redo log 重做日志利用的,是MySQL中,常见的WAL技术,WAL技术的全程是:Writ ...
- mysql connect refuse解决方法
mysql connect refuse解决方法 1 因为连接数太多my.cnf配置文件 下面2个改大一点就好了 <pre>max_user_connectionmax_connectio ...
- python模块——psutil
import psutil 内存 mem = psutil.virtual_memory() print(mem) >>> svmem(total=17048064000, avai ...
- Linux命令实战（三）
1.file检查并显示文件类型(determine file type) 一般用法就是file 后面接要查看的文件 可以一个或多个 [root@test test]# ll total 140 -rw ...
- 别翻了，这篇文章绝对让你深刻理解java类的加载以及ClassLoader源码分析【JVM篇二】
目录 1.什么是类的加载(类初始化) 2.类的生命周期 3.接口的加载过程 4.解开开篇的面试题 5.理解首次主动使用 6.类加载器 7.关于命名空间 8.JVM类加载机制 9.双亲委派模型 10.C ...
- flink 流式处理中如何集成mybatis框架
flink 中自身虽然实现了大量的connectors,如下图所示,也实现了jdbc的connector,可以通过jdbc 去操作数据库,但是flink-jdbc包中对数据库的操作是以ROW来操作并且 ...
- mysql 创建用户及授权（1）
一. 创建用户 命令: CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明: username:你将创建的用户名 host:指定该用户 ...
- 【前端知识体系-CSS相关】Bootstrap相关知识
1.Bootstrap 的优缺点? 优点:CSS代码结构合理,现成的代码可以直接使用(响应式布局) 缺点:定制流程较为繁琐,体积大 2.如何实现响应式布局? 原理:通过media query设置不同分 ...
- 半自动安装 linux 系统
基于图形软件生成应答文件,实现半自动化安装 linux 操作系统 1.yum install -y system-config-kickstart 安装生成自动化安装操作系统的应答文件 2.syste ...