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引入Stylus知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給各位整理的是一篇關(guān)于Vue引入Stylus知識(shí)點(diǎn)總結(jié)內(nèi)容，有需要的朋友們可以學(xué)習(xí)參考下。2020-01-01
Element?UI中v-infinite-scroll無(wú)限滾動(dòng)組件使用詳解
在移動(dòng)端數(shù)據(jù)的更新中許多方法孕育而生,無(wú)限滾輪也是解決的方案一種,Element-ui為vue開發(fā)了一個(gè)事件（v-infinite-scroll）,下面這篇文章主要給大家介紹了關(guān)于Element?UI中v-infinite-scroll無(wú)限滾動(dòng)組件使用的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue觀察模式淺析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue.js是目前很火的一個(gè)前端框架，采用MVVM模式設(shè)計(jì)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。本文重點(diǎn)給大家介紹Vuejs開發(fā)環(huán)境搭建及熱更新的相關(guān)知識(shí)，需要的朋友參考下吧2018-09-09
這篇文章主要給大家介紹了關(guān)于uniapp的核心知識(shí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
這篇文章主要介紹了vue devserver及其配置方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
VUE項(xiàng)目運(yùn)行npm install報(bào)錯(cuò)問(wèn)題以及解決
在運(yùn)行Vue項(xiàng)目時(shí)遇到npm安裝錯(cuò)誤可使用命令npminstall--legacy-peer-deps解決,若VsCode中無(wú)法運(yùn)行npm命令,則可能是IDE配置未生效,可嘗試重啟電腦或使用cmd命令行直接在項(xiàng)目目錄下運(yùn)行2024-10-10
vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法示例【基于vm.$watch】
這篇文章主要介紹了vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法,結(jié)合實(shí)例形式分析了vue.js基于vm.$watch進(jìn)行事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
用Vue.js實(shí)現(xiàn)監(jiān)聽屬性的變化
響應(yīng)系統(tǒng)是Vue.js的一個(gè)顯著功能，修改屬性，可以更新視圖，這讓狀態(tài)管理變得非常簡(jiǎn)單且直觀。這篇文章主要給大家介紹如何利用Vue.js實(shí)現(xiàn)觀察屬性的變化，有需要的朋友們可以參考借鑒，感興趣的朋友們下面來(lái)一起看看吧。2016-11-11
VUE?html5-qrcode實(shí)現(xiàn)H5掃一掃功能實(shí)例
這篇文章主要給大家介紹了關(guān)于VUE?html5-qrcode實(shí)現(xiàn)H5掃一掃功能的相關(guān)資料,html5-qrcode是輕量級(jí)和跨平臺(tái)的QR碼和條形碼掃碼的JS庫(kù),集成二維碼、條形碼和其他一些類型的代碼掃描功能,需要的朋友可以參考下2023-08-08