vue.js todolist實(shí)現(xiàn)代碼

更新時(shí)間：2017年10月29日 11:27:06 作者：zjsfdx

這篇文章主要介紹了vue.js todolist實(shí)現(xiàn)代碼,需要的朋友可以參考下

案例知識(shí)點(diǎn)：

1.vue.js基礎(chǔ)知識(shí)

2.HTML5 本地存儲(chǔ)localstorage

store.js代碼

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代碼

<template>
 <div 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='toogleFinish(item)'>
  {{item.label}}
  </li>
 </ul>
 </div>
</template>
<script>
import Store from './store'
export default {
 name: 'app',
 data () {
 return {
  title: 'this is a todo list',
  items:Store.fetch(),
  newItem:''
 }
 },
 watch:{
  items:{
  handler(items){  //經(jīng)過(guò)變化的數(shù)組會(huì)作為第一個(gè)參數(shù)傳入
   Store.save(items)
   console.log(Store.fetch());
  },
  deep:true  //深度復(fù)制
  }
 },
 methods:{
 toogleFinish(item){
  item.isFinished = !item.isFinished
 },
 addNew(){
  this.items.push({
  label:this.newItem,
  isFinished:false,
  })
  this.newItem = ''
 }
 }
}
</script>
<style>
#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;
}
.finished{
 text-decoration: underline;
}
</style>

總結(jié)

以上所述是小編給大家介紹的vue.js todolist實(shí)現(xiàn)代碼，希望對(duì)的大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

VUE使用vue?create命令創(chuàng)建vue2.0項(xiàng)目的全過(guò)程
vue-cli是創(chuàng)建Vue項(xiàng)目的一個(gè)腳手架工具,vue-cli提供了vue create等命令,下面這篇文章主要給大家介紹了關(guān)于VUE使用vue?create命令創(chuàng)建vue2.0項(xiàng)目的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
element-ui upload組件上傳文件類型限制問(wèn)題小結(jié)
最近我遇到這樣的問(wèn)題,接受類型已經(jīng)加了accept 但是當(dāng)選擇彈出本地選擇文件時(shí)候切換到所有文件之前的文件類型就本根過(guò)濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問(wèn)題小結(jié),感興趣的朋友一起看看吧
2024-02-02
解決vue $http的get和post請(qǐng)求跨域問(wèn)題
這篇文章主要介紹了解決vue $http的get和post請(qǐng)求跨域問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2021-06-06
使用 Vue 實(shí)現(xiàn)一個(gè)虛擬列表的方法
這篇文章主要介紹了使用 Vue 實(shí)現(xiàn)一個(gè)虛擬列表的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
VUE+axios+php實(shí)現(xiàn)圖片上傳
這篇文章主要為大家詳細(xì)介紹了VUE+axios+php實(shí)現(xiàn)圖片上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
使用Vue3和Plotly.js打造一個(gè)3D圖在線展示的實(shí)現(xiàn)步驟
三維網(wǎng)格圖廣泛應(yīng)用于科學(xué)可視化、醫(yī)學(xué)成像、工程設(shè)計(jì)等領(lǐng)域,用于展示復(fù)雜的數(shù)據(jù)結(jié)構(gòu)和空間分布,本文給大家介紹了使用Vue3和Plotly.js打造一個(gè)3D圖在線展示的實(shí)現(xiàn)步驟,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下
2024-07-07
Vue中自定義標(biāo)簽及其使用方式
這篇文章主要介紹了Vue中自定義標(biāo)簽及其使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue vant Area組件使用詳解
這篇文章主要介紹了vue vant Area組件使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
element-ui封裝一個(gè)Table模板組件的示例
這篇文章主要介紹了element-ui封裝一個(gè)Table模板組件的示例，幫助大家更好的理解和學(xué)習(xí)vue框架的使用，感興趣的朋友可以了解下
2021-01-01
vite打包只生成了一個(gè)css和js文件問(wèn)題的解決方法
今天整了一個(gè)項(xiàng)目,試了下打包,發(fā)下打包后只生成了一個(gè)css文件,和一個(gè)js文件,這樣肯定是不行的,因?yàn)檫@樣這個(gè)文件的包大小很大,第一次訪問(wèn)會(huì)導(dǎo)致白屏問(wèn)題,所以本文給大家介紹了vite打包只生成了一個(gè)css和js文件問(wèn)題的解決方法,需要的朋友可以參考下
2024-05-05