我們?cè)趖opNav這個(gè)頁面上插入一個(gè)todolist子組件

威信ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

我不知道怎么回事，這里的markdown的代碼總是串行。。所以代碼看得不舒服，見諒啊，我最后會(huì)放github的源代碼地址。

1. 父組件topNav中注冊(cè)子組件，引入子組件

2. 先看看組件的功能

首先我們先大體看看組件長啥樣，然后我才去構(gòu)思如何寫

首先我們看到的是一個(gè)input輸入框，默認(rèn)顯示edit..，當(dāng)我們沒有添加數(shù)據(jù)的時(shí)候，下方顯示的“暫無內(nèi)容”

接著，我們輸入數(shù)據(jù)“第一個(gè)例子”然后敲擊回車，就會(huì)出現(xiàn)一行l(wèi)ist

list包括一個(gè)單選框，文字，還有一個(gè)刪除的按鈕

那怎么刪除呢？那既然要做，肯定稍微做多一點(diǎn)功能，把一些內(nèi)部指令都用一下，我們?cè)O(shè)置的刪除規(guī)則是

先選中該list，然后點(diǎn)擊刪除，然后該條記錄就沒有了，如果刪除這個(gè)數(shù)據(jù)后，就沒有l(wèi)ist了，那“暫無內(nèi)容”就要顯示出來了

3. 開始寫我們的todo子組件了

關(guān)于代碼中的樣式我放在最后，所以此刻你可以忽略一些class

我們先把這個(gè)todolist的大體框架搭好，然后往里面增加功能

接下來我就不針對(duì)每一小步都給出代碼來更新了，因?yàn)槠?，我?huì)更具一個(gè)功能塊來寫（我會(huì)很詳細(xì)的）

首先我們先理清以下思路

在輸入框中輸入數(shù)據(jù)，按下回車就會(huì)在下方顯示一行l(wèi)ist列表（包括一個(gè)單選框，輸入的數(shù)據(jù)，藍(lán)色操作按鈕）

將輸入框的值和inputItem.content進(jìn)行雙向綁定

給輸入框綁定回車事件(@keydown.13)到addItem方法中，每次輸入回車，就將輸入框的數(shù)據(jù)添加進(jìn)list列表中（inputList數(shù)組中）

利用v-for指令遍歷inputList中的值并顯示

選中單選框，list的內(nèi)容變成刪除效果（中間橫線劃過），藍(lán)色操作按鈕變成紅色刪除按鈕，點(diǎn)擊按鈕，就會(huì)刪除該列l(wèi)ist

將單選框的checked和inputItem的finished進(jìn)行綁定，綁定后就可以利用這個(gè)finished來做一些別的事了

剛添加進(jìn)列表內(nèi)容的list的按鈕是藍(lán)色操作按鈕，如果我們要通過單選框的選中與否的兩種狀態(tài)來使content的子添加和移除一個(gè)class（就是上面說的刪除效果），以及將按鈕變成紅色的刪除按鈕，那就可以綁定changeState方法來操作

那刪除功能呢？首先，我們要選中該行l(wèi)ist，再點(diǎn)擊刪除才能刪除該行數(shù)據(jù)，對(duì)吧。所以我們將按鈕綁定一deleteItem方法，方法做的事情就是先檢測(cè)該行的finished是否是true，如果是true，那么我們就刪除該行數(shù)據(jù)

我們先完成添加功能：在輸入框輸入數(shù)據(jù)，回車，會(huì)在下面顯示一行列表（包括單選框，輸入的數(shù)據(jù)，刪除按鈕）

我們先看看列表內(nèi)容的代碼

 

  
  
  
  {{item.content}}
  
  {{isDel}}
 

暫無內(nèi)容

然后我們講解changeState方法

//改變選中狀態(tài)
   changeState: function (index) {
    // this.inputList[index].finished = true 錯(cuò)誤：這樣如果點(diǎn)擊第二次，無法回到false，就會(huì)一直true狀態(tài)
    this.inputList[index].finished = !this.inputList[index].finished;
    // 根據(jù)finished的值來對(duì)應(yīng)的修改isDel的值，isDel的值就是按鈕的文本
    if (this.inputList[index].finished) {
   this.isDel = '刪除'
    }else {
     this.isDel = '操作'
 }
   },
//刪除列表元素
   deleteItem: function (index) {
   if (this.inputList[index].finished) {
    his.inputList.splice(index,1);
   }
   }

總結(jié)

以上所述是小編給大家介紹的vue組件編寫之todolist組件實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！