vue-todolist

http://todolist.cn/

App.vue

<template><div><div>大家好，我叫技术高超</div><div>大家好，我叫{{name}}</div><input type="text" v-model="name"><hr><input type="text" v-model="todo" @keyup="keyupClick($event)"><button @click="addData()">添加</button><h2>正在进行中</h2><ul><li v-for="(item,index) in list" :key="index" v-if="!item.checked"><input type="checkbox" v-model="item.checked" @change="changeList()">{{item.title}}<button @click="deleteData(key)">删除</button></li></ul><h2>已经完成</h2><ul class="finished"><li v-for="(item,key) of list" :key="key" v-if="item.checked"><input type="checkbox" v-model="item.checked" @change="changeList()">{{item.title}}<button @click="deleteData(key)">删除</button></li></ul></div>
</template><script>
import storage from "./model/storage.js";
export default {data() {return {name: "技术高超",todo: "",list: []};},methods: {addData() {this.list.push({title: this.todo,checked: false});storage.set("list", this.list);this.todo = "";},deleteData(key) {this.list.splice(key, 1);storage.set("list", this.list);},keyupClick(e) {if (e.keyCode == 13) {this.addData();}},changeList() {storage.set("list", this.list);}},mounted() {let result = storage.get("list");if (result) {this.list = result;}}
};
</script><style lang="scss">
.finished {li {background: #eee;}
}
</style>

Storage.js

//封装操作localstorage
var storage = {set(key, value) {localStorage.setItem(key, JSON.stringify(value));},get(key) {return JSON.parse(localStorage.getItem(key));},remove(key) {localStorage.removeItem(key);}
}export default storage;

转载于:https://www.cnblogs.com/jishugaochao/p/10855622.html

vue-todolist相关推荐

vue todolist
最近初学vue,做最简单的todolist <!DOCTYPE html> <html><head><meta charset="UTF-8&quo ...
[Vue] TodoList 案例
前言系列文章目录: [Vue]目录老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU 笔记在线版: https://note.youdao ...
【Vue】高级系列（五）Vue模块化实战-demo2-任务清单todoList
文章目录 1. 目标功能界面 2. 界面模块拆分 3. 主页 index.html 4. 静态页面搭建 4.1 main.js 4.2 App.vue 4.3 TodoHeader.vue 4.4 T ...
electron 打包 php,electron 将现有vue项目改成支持electron桌面端应用
vue过滤器和组件化 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name=" ...
vue2.0-脚手架-todolist案例
一 vue脚手架2.0 安装 npm install vue-cli -g 查阅一下脚手架可支持的模板 vue list可以查到 template-name 使用脚手架生成项目(以下命令得运行在项目的 ...
尚硅谷todolist案例
vue todolist案例 1 拆分组件一共拆分为4个组件 TodoHeader TodoItem TodoList TodoFooter item是list的子组件 2 组件化编码流程实现静态 ...
[Vue]学习笔记目录【Vue2与Vue3完结】 (尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通)
文章目录前言遇见的问题及其解决方案之前笔记 Vue2 Vue3 前言本笔记根据如下笔记和视频进行整理老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8 ...
2018年最新Vue从基础入门到项目实战视频教程网盘学习地址
2018年最新Vue从基础入门到项目实战视频教程网盘学习地址: https://pan.baidu.com/s/15D6GiHnSgA5Eo0n9G5Ws1A 若网盘地址失效,可访问此地址(下单有网盘 ...
Vue 系列一之 Vue 基础
Create by jsliang on 2018-11-8 13:34:30 Recently revised in 2019-1-12 19:23:17 Hello 小伙伴们,如果觉得本文还不错, ...
typescript vuex_Vue3+TypeScript完整项目上手教程
作者:TinssonTai https://juejin.im/post/6875713523968802829 一个完整的Vue3+Ts项目,支持.vue和.tsx写法项目地址:https://g ...

vue-todolist

vue-todolist相关推荐

最新文章

热门文章