日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(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

效果圖

vue + vuex todolist的實(shí)現(xiàn)示例代碼

根組件





過濾條件組件






添加待辦組件





單個(gè)待辦事項(xiàng)組件







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