Vue小案例—todo list

来源：互联网发布：2013十大网络流行语编辑：程序博客网时间：2024/06/04 07:23
<template>  <div id="app">      <h1 v-text = "title"></h1>      <input v-model = "newItem" v-on:keyup.enter = "addNew"/>      <ol>          <li v-for="item in items" v-bind:class="{finished:item.              isFinished}" v-on:click ="toggleFinished(item)">              {{item.label}}          </li>      </ol>  </div></template><script>//设置store存储信息import Store from './store'export default { data:function () {    return {      title: 'this is todo list',      //获得每次输入的信息      items:Store.fetch(),      /*{          label:'coding',          isFinished:true      },{          label:'walking',          isFinished:true      }*/            liClass:'thisIsLiClass',      newItem:"",    }  }, watch:{     items:{         handler:function(items) {             //把输入的值存入到localStorage             Store.save(items);         },         deep:true     } }, methods:{         toggleFinished:function (item) {             item.isFinished = !item.isFinished;         },         addNew:function () {             this.items.push({                 label:this.newItem,                 isFinished:false             })             this.newItem = "";         } }}</script><style>.finished{    text-decoration: line-through;}#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;}</style>
0 0