| |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| -> JavaScript知识库 -> vue+localStorage制作todolist -> 正文阅读 |
|
|
[JavaScript知识库]vue+localStorage制作todolist |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> <style> .cur { color: Red; } </style> </head> <body> <div id="app"> <h1>todulist</h1> <input type="text" v-model="word" /> <button @click="add">添加</button> <div class="btn-group"> <button type="button" @click="activeIndex=0" :class="activeIndex==0?'cur':''" > 全部 </button> <button type="button" @click="activeIndex=1" :class="activeIndex==1?'cur':''" > 未完成 </button> <button type="button" @click="activeIndex=2" :class="activeIndex==2?'cur':''" > 已完成 </button> </div> <ul> <li v-for="(item, index) of newlist" :key="index"> <i>{{index+1}}</i> <span :class="item.finish?'cur':''" @click="item.finish=!item.finish" >{{item.val}}</span > <a href="#" class="del" @click="del(item.id)">删除</a> </li> </ul> </div> <script src="vue.min.js"></script> <script> var vm = new Vue({ el: "#app", data: { activeIndex: 0, word: "", list: JSON.parse(localStorage.getItem("box")) || [], //初始化时先查看localStorage中有没有数据，有则直接显示，没有则为空数组 newlist: JSON.parse(localStorage.getItem("box")) || [] //因为存在localStorage里面的是字符串类型，需要用JSON.parse转译为对象类型 }, methods: { add() { if (this.word == "") { alert("请输入内容"); } else { let content = { id: new Date().getTime(), val: this.word, finish: false }; this.list.push(content); this.word = ""; } }, del(index) { let ifDel = confirm("是否确认删除"); if (ifDel) { this.list = this.list.filter(a => a.id != index); } } }, watch: { activeIndex(e) { if (e == 0) { this.newlist = this.list; } else if (e == 1) { this.newlist = this.list.filter(a => !a.finish); } else if (e == 2) { this.newlist = this.list.filter(a => a.finish); } }, list: { deep: true, handler(e) { if (this.activeIndex == 0) { this.newlist = this.list; } else if (this.activeIndex == 1) { this.newlist = this.list.filter(a => !a.finish); } else if (this.activeIndex == 2) { this.newlist = this.list.filter(a => a.finish); } localStorage.setItem("box", JSON.stringify(this.list)); //存数据，localStorage要存储字符串类型，用JSON.stringify转义 } } } }); </script> </body> </html> |
|
|
| JavaScript知识库 最新文章 |
| ES6的相关知识点 |
| react 函数式组件 & react其他一些总结 |
| Vue基础超详细 |
| 前端JS也可以连点成线（Vue中运用 AntVG6） |
| Vue事件处理的基本使用 |
| Vue后台项目的记录 （一） |
| 前后端分离vue跨域，devServer配置proxy代理 |
| TypeScript |
| 初识vuex |
| vue项目安装包指令收集 |
|
|
| 上一篇文章 下一篇文章 查看所有文章 |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| 360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 | -2024/5/10 15:13:39- |
|
| 网站联系: qq:121756557 email:121756557@qq.com IT数码 |