todos 組件源碼：

{{title}}

• @keyup.13="addItem"

  placeholder="快寫下您要我記住的事吧"

  autofocus="true"/>

• {{index+1}}.{{todo.value}}

  {{todo.created|date}}

import './assets/todos.less'

import moment from 'moment'

import 'moment/locale/zh-cn'

moment.locale('zh-cn')

export default {

name: 'app',

data () {

return {

title: 'vue-todos',

newTodo:'',

todos:[]

}

},

created(){

if(this.is_initialized){

this.todos = JSON.parse(localStorage.getItem('VUE-TODOS'))

}

},

computed:{

is_initialized(){

return localStorage.getItem('VUE-TODOS') != null

}

},

filters:{

date(val){

return moment(val).calendar()

}

},

methods:{

addItem(){

this.todos.push({

value:this.newTodo,

done:false,

created:Date.now()

});

this.saveToStore();

this.newTodo = ''

},

delItem(todo){

this.todos = this.todos.filter((x) => x !== todo);

this.saveToStore()

},

saveToStore(){

localStorage.setItem('VUE-TODOS',JSON.stringify(this.todos))

}

}

}

總結

以上是生活随笔為你收集整理的vue2实践揭秘pdf_《Vue2实践揭秘》源码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。