国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue官網todoMVC示例

mgckid / 2425人閱讀

這個示例是模仿官網示例樣式和功能用我自己的方式寫的,基本上沒有看官網的源碼,只參考自定義指令。讓我們一步步來探討一下。官網demo

要實現的功能

單條添加todo

單條刪除todo

雙擊編輯todo

單條todo已完成相應樣式狀態改變

全部todo是已完成相應樣式狀態改變

清除全部已完成todos

待辦todos數量顯示

所有todos,已完成todos,未完成todos篩選

單條添加todo
//操作input元素使enter一下之后清空輸入框內容
data() {//一些初始化數據
    return {
        todolists: [],
        dataStatus: ["All", "Active", "Completed"],
        dataStatusIndex: 0,
        whichShow: true,
        defaultShow: true
    }
},
addTodo(e) { //添加todo
    var val = e.value
    if (val === "") {return} //如果輸入內容為空則立即返回
    this.todoLists = this.todoLists.concat({//使用concat這個api添加todo
        value: val, //輸入內容
        isEditing: false, //是否在編輯狀態
        isActive: false, //刪除X圖標是否激活
        isChecked: false //是否已完成
    })
    this.$refs.currentInput.value = "" //按下enter添加todo之后把輸入框value清零
    window.localStorage.setItem("content",JSON.stringify(this.todoLists))//使用localStorage以JSON格式存儲數據
},

把每條todo的對應狀態都存在同一個對象當中,在操作改變todo狀態的時候不會被統一處理,使得每條todo都有多帶帶的狀態。

單條刪除todo
 
  • //綁定刪除單條todo事件
  • deleteTodo(index) { //刪除單條todo
            this.todoLists.splice(index, 1)//使用splice的api
            window.localStorage.setItem("content",JSON.stringify(todoLists)) //以JSON格式存儲數據//localStorage存儲數據
    },

    在每個li元素上綁定了鼠標移入和移除的事件來動態的改變每個todo的isActive,然后再使用isActive動態顯示class。

    雙擊編輯todo&&單條todo已完成
    //雙向綁定isChecked
    
    
    //動態綁定class該表已完成todo樣式 {{list.value}}
    //綁定blur失去焦點事件
    methods: {
        toEdit(obj) { //使添加的todothing可編輯
            obj.isEditing = true
        },
        
        unEdit(obj) { //使添加的todothing不可編輯
            obj.isEditing = false
        },
    }
    
    directives: { //自定義focus指令,需要一個binding參數做判斷
        "todo-focus": function (el, binding) {
            if (binding.value) {
                el.focus()
            }
        }
    }

    通過每個todo里的isEditing屬性控制show和是否可編輯兩個狀態,雙擊div之后改變當前todo的isEditing為true,從而顯示為input,input失去焦點之后再通過blur事件改為false。
    通過todo的idChecked來控制是否已完成,從而動態改變樣式。

    全部todos已完成
     //全部已完成事件
    selectAllTodos() { //設置所有todo為已完成,使用map的api通過todo的isChecked屬性操作
        this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
    }
    待辦todos數量顯示
    //times為0顯示item,大于0顯示items,細節注定成敗 {{times}}  item left
    {{times}}  items left
    computed: {
        times() { //使用計算屬性計算待辦todos的次數 
            let todoArr = this.todoLists
            let times = 0
            for (let i = 0; i < todoArr.length; i++) {
                if (todoArr[i].isChecked === false) {
                    times++
                }
            }
            return times
        }
    },

    使用了計算屬性對todoLists計算,用for循環刷選出idChecked為true的累加,最后返回times。

    清除全部已完成todos
    //如果待辦事件次數小于總todoLists長度就顯示“clear completed” clear completed
    //如果待辦事件次數等于總todoLists長度就顯示“clear completed”
    clearTodos() { //清空已完成的todoLists,使用filter的api進行篩選
        this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
        window.localStorage.setItem("content",JSON.stringify(this.todoLists)) //以json格式存儲數據
    },

    如果待辦todos的times小于todoLists長度,就證明有已完成的todo,就可以顯示“clear completed”,如果相等就說明沒有已完成的todo。

    三種狀態篩選

    所有todos,已完成todos,未完成todos篩選

  • switchStatus(index) { //通過if條件判斷操作
        this.dataStatusIndex = index
        if (this.dataStatus[index] === "Active") {
            this.defaultShow = false
            this.whichShow = false
        } else if (this.dataStatus[index] === "Completed") {
            this.defaultShow = false
            this.whichShow = true
        } else if (this.dataStatus[index] === "All") {
            this.defaultShow = true
        }
    },

    我這里是同時if條件句判斷操作,有點麻煩,目前還沒有想出來其他方案。在li元素使用三元運算符和或運算符進行操作顯示不同狀態的todos。

    完整代碼
    
        
    todos
    • {{list.value}}
    {{times}} item left
    {{times}} items left

    文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

    轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107029.html

    相關文章

    • Vue.js 的一些資源索引

      摘要:是剛出來的一個輕型的框架借鑒了現有的各種框架官網作者個人網站挺漂亮的作者微博尤小右作者是員工目前已經在一些項目嘗試按去年月已經開始了項目項目主頁是今年月上線的作者記錄了上線一周的情況文檔主要是在官網上非常清晰目前還是比較簡短的另 Vue.js 是剛出來的一個輕型的 MVVM 框架, 借鑒了現有的各種框架, 官網 http://vuejs.org/ Github https://gith...

      yacheng 評論0 收藏0
    • Vue.js@2.6.10更新內置錯誤處機制,Fundebug同步支持相應錯誤監控

      摘要:摘要的錯誤監控插件同步支持異步錯誤監控。此次更新,我們對的監控插件做了相應的更新,來更好地支持使用框架開發的應用錯誤的監控。程序運行后,成功捕獲該錯誤總結更新到,對錯誤處理提供了更加強大的支持。 摘要: Fundebug 的 JavaScript 錯誤監控插件同步支持 Vue.js 異步錯誤監控。 Vue.js 從誕生至今已經 5 年,尤大在今年 2 月份發布了重大更新,即Vue 2....

      DC_er 評論0 收藏0
    • React+webpack+Antd從0到1開發一個todoMvc

      摘要:在裝載組件之前調用會組件的構造函數。當實現子類的構造函數時,應該在任何其他語句之前調用設置初始狀態綁定鍵盤回車事件,添加新任務修改狀態值,每次修改以后,自動調用方法,再次渲染組件。可以通過直接安裝到項目中,使用或進行引用。 首先我們看一下我們完成后的最終形態:TodoMvc: showImg(https://segmentfault.com/img/remote/14600000085...

      sanyang 評論0 收藏0
    • vueTodoMVC事例總結

      摘要:縮寫為數據鍵盤事件添加事項指令指令監聽事件。這塊內容只會在指令的表達式返回值的時候被渲染。清空已辦事項全選取消全選方法用于調用數組的每個元素,并將元素傳遞給回調函數。 gitHub地址:https://github.com/gaozhixiao... 功能拆分: 渲染數據 鍵盤事件:添加事項 鼠標點擊事件:移除事項 顯示未辦事項數據 全部事項、未辦事項、已辦事項狀態切換 清除全部完成...

      CKJOKER 評論0 收藏0
    • vue初探-簡易留言板

      摘要:學完的基礎語法之后,練手一下,從最基本的留言板開刀吧。功能不多,主要為了熟悉的基礎語法使用。 學完vue的基礎語法之后,練手一下,從最基本的留言板開刀吧。功能不多,主要為了熟悉vue的基礎語法使用。詳細vue教程請移步vue.js 2.0 技術框架 1.vue.js 2.0 2.bootstrap 語法概述 這里只寫一點此例子用到的一些語法知識,詳細API請移步:vue 2.0 a...

      GHOST_349178 評論0 收藏0

    發表評論

    0條評論

    mgckid

    |高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <