欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 前端技术 > vue >内容正文

vue

vue-todolist

发布时间:2024/7/5 vue 13 豆豆
如意编程网 收集整理的这篇文章主要介绍了 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的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。