本篇文章给大家详细介绍一下vue封装一个todolist的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
使用vue封装一个简易的todolist的小案例. 同时加入了浏览器本地缓存的技术手段.
浏览器本地缓冲:前提： 一般我们定义的变量，或者用vuex保存的数据， 当浏览器进行了一个刷新 那么这个数据就会丢失, 这样就做不出历史记录的效果了， 但是， 使用浏览器缓存就可以帮助我们解决这个问题…浏览器缓存分为二种 sessionstorage 和 localstorage， 二种原型链分别如下:
可以看得出， 他们的原型链上基本都是一样的， 唯一的区别在于
localstorage 作用于本地缓存， 时间是持久的，除非手动去删除， 或者清空， 不然一直都存在浏览器中
sessionstorage 作用与会话缓存， 生命周期只存在于本次打开浏览器会话， 当完成的关闭浏览器，那么信息就会丢失， 而仅仅刷新页面， 数据仍然保存。本次实例，使用的是 sessionstorage， 并对此进行了一次小封装.
const storage = { set(key, value){ window.sessionstorage.setitem(key, json.stringify(value)); }, get(key){ return json.parse(window.sessionstorage.getitem(key)); }, remove(key){ window.sessionstorage.removeitem(key); }}export default storage;
实例代码:<template> <p class="todo"> <header> <input type="text" placeholder="输入..." v-model="keyword" @keydown.enter="handlelist"> todolist </header> <!-- 正在进行 --> <h4>正在进行...{{dolistnumber}}</h4> <template v-for="(item, index) in dolist" :key="index"> <p class="dolist" v-if="!item.checked"> <label :for="index +'l'"> <input type="checkbox" v-model="item.checked" :id="index +'l'" @change="handlechecked"> {{item.title}} </label> <span @click="cancaldo(index)">x</span> </p> </template> <!-- 已经完成 --> <h4>已经完成...{{dolist.length - dolistnumber}}</h4> <template v-for="(item, index) in dolist" :key="index"> <p class="dolist" v-if="item.checked"> <label :for="index +'ll'"> <input type="checkbox" v-model="item.checked" :id="index +'ll'" @change="handlechecked"> {{item.title}} </label> <span @click="cancaldo(index)">x</span> </p> </template> </p></template><script> import storage from '../storage.js'; export default { name: "todolist", data() { return { keyword: "", // 输入的选项 dolist: [], } }, computed:{ dolistnumber(){ return this.dolist.filter(item => item.checked === false).length; } }, methods: { handlechecked(){ // 当更改状态之后 重新刷新 storage.set('dolist', this.dolist); }, handlelist() { if (this.keyword !== "") { this.dolist.push({ title: this.keyword, checked: false, }); this.keyword = ""; storage.set('dolist', this.dolist); } }, cancaldo(index) { // 删除这个 this.dolist.splice(index, 1); storage.set('dolist', this.dolist); } }, mounted(){ let dolist = storage.get('dolist'); if(dolist){ this.dolist = dolist; } }, } </script><style> .todo { margin: 400px auto; min-height: 300px; width: 800px; background-color: #eee; } .todo header { position: relative; text-align: center; height: 60px; line-height: 60px; font-size: 20px; border-bottom: 2px solid #fff; } .todo header input { position: absolute; left: 40px; top: 50%; transform: translatey(-50%); outline: none; line-height: 30px; border-radius: 15px; padding-left: 30px; border: 1px solid #999; font-size: 16px; width: 100px; transition: all .6s linear; } .todo header input:focus { width: 200px; } .dolist { padding: 20px; font-size: 16px; } .dolist label { cursor: pointer; } .dolist input { margin-right: 10px; } .dolist span:last-child { float: right; border: 1px solid gray; background-color: #999; color: #fff; border-radius: 50%; padding: 5px; } h4 { padding-bottom: 20px; text-align: center; }</style>
推荐学习：vue.js教程
以上就是vue如何封装一个todolist的详细内容。