新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
vue+vuextodolist的實(shí)現(xiàn)示例代碼
todolist demo
成都創(chuàng)新互聯(lián)公司專注于薩嘎網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供薩嘎營銷型網(wǎng)站建設(shè),薩嘎網(wǎng)站制作、薩嘎網(wǎng)頁設(shè)計(jì)、薩嘎網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù),打造薩嘎網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供薩嘎網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
最近有空重新看了一下vuex,然后又寫了一個(gè)todolist小demo,原理比較簡單,主要是自己規(guī)范了一下代碼的寫法.
下載地址 :vue-test_jb51.rar
效果圖
根組件
todo list demo
過濾條件組件
- {{item}}
添加待辦組件
單個(gè)待辦事項(xiàng)組件
{{index+1}}. {{data.message}}{{dateFormat(data.id)}} Delete
vuex部分(模塊)
const state = { list: [], types: ['ALL', 'UNDO', 'DONE'], filter: 'ALL' } const mutations = { handleAdd(state, item) { state.list = [...state.list, item] }, handleRemove(state, id) { state.list = state.list.filter(obj => obj.id !== id) }, handleToggle(state, id) { state.list = state.list.map( obj => (obj.id === id ? { ...obj, status: !obj.status } : obj) ) }, handleUpdateFilter(state, filter) { state.filter = filter } } export default { namespaced: true, state, mutations }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
文章名稱:vue+vuextodolist的實(shí)現(xiàn)示例代碼
當(dāng)前地址:http://www.dlmjj.cn/article/pjcjcs.html