How to implement vue.js todolist-JS Tutorial-php.cn

How to implement vue.js todolist

php中世界最好的语言

Release： 2017-12-31 11:36:11

Original

2543 people have browsed it

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 = &#39;todos-vue.js&#39;
export default{
 fetch(){
  return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || &#39;[]&#39;)
 },
 save(items){
  window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));
 }
}

Copy after login

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>

Copy after login

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!