vue.js todolist实现代码
程序员文章站
2022-04-28 23:26:25
案例知识点:
1.vue.js基础知识
2.html5 本地存储localstorage
store.js代码
const storage_key = 't...
案例知识点:
1.vue.js基础知识
2.html5 本地存储localstorage
store.js代码
const storage_key = 'todos-vue.js' export default{ fetch(){ return json.parse(window.localstorage.getitem(storage_key) || '[]') }, save(items){ window.localstorage.setitem(storage_key,json.stringify(items)); } }
app.vue代码
<template> <div id="app"> <h1 v-text="title"></h1> <input v-model="newitem" v-on:keyup.enter="addnew"/> <ul> <li v-for="item in items" v-bind:class="{finished:item.isfinished}" v-on:click='tooglefinish(item)'> {{item.label}} </li> </ul> </div> </template> <script> import store from './store' export default { name: 'app', data () { return { title: 'this is a todo list', items:store.fetch(), newitem:'' } }, watch:{ items:{ handler(items){ //经过变化的数组会作为第一个参数传入 store.save(items) console.log(store.fetch()); }, deep:true //深度复制 } }, methods:{ tooglefinish(item){ item.isfinished = !item.isfinished }, addnew(){ this.items.push({ label:this.newitem, isfinished:false, }) this.newitem = '' } } } </script> <style> #app { font-family: 'avenir', helvetica, arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .finished{ text-decoration: underline; } </style>
总结
以上所述是小编给大家介绍的vue.js todolist实现代码,希望对的大家有所帮助!