How to implement vue.js todolist

What I bring to you this time is how to implement vue.js todolist. First of all, we need to know the basic knowledge of vue.js and HTML5 local storage localstorage. This article will give you a good analysis.

store.js code

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 code

<template>
 <p 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=&#39;toogleFinish(item)&#39;>
  {{item.label}}
  </li>
 </ul>
 </p>
</template>
<script>
import Store from &#39;./store&#39;
export default {
 name: &#39;app&#39;,
 data () {
 return {
  title: &#39;this is a todo list&#39;,
  items:Store.fetch(),
  newItem:&#39;&#39;
 }
 },
 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 = &#39;&#39;
 }
 }
}
</script>
<style>
#app {
 font-family: &#39;Avenir&#39;, 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>

I believe you have read the above Introduction You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use the function of ES6 destructuring assignment

js to achieve the imitation window system calendar effect

How can JS click to jump to the logged-in personal email address

The above is the detailed content of How to implement vue.js todolist. For more information, please follow other related articles on the PHP Chinese website!