So implementieren Sie die todolist von vue.js

Was ich Ihnen dieses Mal mitbringe, ist die Implementierung von vue.js Todolist. Zunächst müssen wir die Grundkenntnisse von vue.js und dem lokalen HTML5-Speicher kennen.

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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie die obige Einführung gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie die Funktion der ES6-Destrukturierungszuweisung

js, um einen nachgeahmten Fenstersystem-Kalendereffekt zu erzielen

So verwenden Sie JS, um per Klick zum angemeldeten persönlichen Postfach zu springen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die todolist von vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!