vue組件編寫之todolist組件執行個體詳解，vuetodolist

vue組件編寫之todolist組件執行個體詳解，vuetodolist

我們在topNav這個頁面上插入一個todolist子組件

我不知道怎麼回事，這裡的markdown的代碼總是串列。。所以代碼看得不舒服，見諒啊，我最後會放github的原始碼地址。

1. 父組件topNav中註冊子組件，引入子組件

<template> <div>  <p>下面這一行就是定義的組件名稱</p>  <todo-list></todo-list>  <router-view></router-view> </div></template><script>/*

    1. 通過import來引入我們的子組件drawerLayout

    2. 引入子組件，並重新取名為todoList，然後在components組冊一下

    3.在我們的template中按照html標籤的形式使用組件，todoList就是<todo-list>

注意：

    (1) 子組件的名字無所謂，但是我們引入的那個子組件名todoList，第二個單詞的首字母一定要大寫（不然你會踩坑的）

    (2) 使用標籤時，todoList，就是todo-list，就是寫成駝峰命名法（通俗說就是在第二個單詞的大寫首字母改成小寫形式，然後前面加一個 “-”）

*/import todoList from '../components/todoList.vue' export default {  components: {   todoList  },  data() {   return {   };  } }</script>

2. 先看看組件的功能

首先我們先大體看看組件長啥樣，然後我才去構思如何寫

首先我們看到的是一個input輸入框，預設顯示edit..，當我們沒有添加資料的時候，下方顯示的“暫無內容”

 

接著，我們輸入資料“第一個例子”然後敲擊斷行符號，就會出現一行list

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

 

那怎麼刪除呢？那既然要做，肯定稍微做多一點功能，把一些內部指令都用一下，我們設定的刪除規則是

先選中該list，然後點擊刪除，然後該條記錄就沒有了，如果刪除這個資料後，就沒有list了，那“暫無內容”就要顯示出來了

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

關於代碼中的樣式我放在最後，所以此刻你可以忽略一些class

我們先把這個todolist的大體架構搭好，然後往裡面增加功能

<template><div class="ex1">  <div class="input-text"> <label for="inputNum">請輸入：</label> <input type="text"     id="inputNum"     name="inputNum"     placeholder="edit.."> <!--列表內容--> <ul>  <li>   <input type="checkbox" >   <span>dd</span>   <button>刪除</button>  </li> </ul> <p class="empty" v-if="!inputList.length">暫無內容</p>  </div></div></template><script> export default {  data () {   return {    inputList: [],    inputItem: {     content: '',  finished: false,  deleted: false }   }  },  methods: {   //將輸入框的資料添加到list中     addItem: function() {}   //改變選中狀態   changeState: function(index) {},   //刪除列表元素   deleteItem: function(index) {}  } }</script>

 

接下來我就不針對每一小步都給出代碼來更新了，因為篇幅太大，我會更具一個功能塊來寫（我會很詳細的）

首先我們先理清以下思路

在輸入框中輸入資料，按下斷行符號就會在下方顯示一行list列表（包括一個單選框，輸入的資料，藍色操作按鈕）

將輸入框的值和inputItem.content進行雙向繫結

給輸入框綁定斷行符號事件(@keydown.13)到addItem方法中，每次輸入斷行符號，就將輸入框的資料添加進list列表中（inputList數組中）

利用v-for指令遍曆inputList中的值並顯示

選中單選框，list的內容變成刪除效果（中間橫線划過），藍色操作按鈕變成紅色刪除按鈕，點擊按鈕，就會刪除該列list

將單選框的checked和inputItem的finished進行綁定，綁定後就可以利用這個finished來做一些別的事了

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

那刪除功能呢？首先，我們要選中該行list，再點擊刪除才能刪除該行資料，對吧。所以我們將按鈕綁定一deleteItem方法，方法做的事情就是先檢測該行的finished是否是true，如果是true，那麼我們就刪除該行資料

我們先完成添加功能：在輸入框輸入資料，斷行符號，會在下面顯示一行列表（包括單選框，輸入的資料，刪除按鈕）

<template><div class="ex1">  <div class="input-text"> <label for="inputNum">請輸入：</label>   <!--@keydow.13表示斷行符號的事件-->  <!--v-model是為了讓輸入的資料和inputItem.content同步-->    <input type="text" id="inputNum" name="inputNum" placeholder="edit.."   @keydown.13="addItem" v-model="inputItem.content" class="edit"  >  <!--列表內容-->  <ul class="task">   <li v-for="(key, item) in inputList">    <input type="checkbox" :checked="item.finished">    <span>{{key.content}}</span>    <button class="del">刪除</button>   </li>  </ul> <p class="empty" v-if="!inputList.length">暫無內容</p>  </div></div></template><script> export default {  data () {...省略  },  methods: {   addItem: function() {     this.inputList.push(this.inputItem);     /*     為什麼我們要對inputItem再次初始化？     解答：因為每次在輸入框中輸入資料，都會同時改變inputItem的content屬性，     然後我們點擊斷行符號，該inputItem的整個對象都添加進inputList中，     按正常邏輯來說，inputList內的內容和inputItem是沒有聯絡了。     如果我們此時不對inputItem進行再次初始化，那麼就會發現你再次在輸入框中輸入資料的時候，     會同時改變下面的list的值，簡易你們把初始化的代碼去掉，運行下試試看！     */  this.inputItem = {      content: '',      finished: false,      deleted: false  };   },   //改變選中狀態   changeState: function(index) {},   //刪除列表元素   deleteItem: function(index) {}  } }</script>

我們先看看列表內容的代碼

<!--列表內容--><ul class="task"> <li v-for="(item, index) in inputList">  <!--單選框綁定了item.finished，還添加了點擊事件-->  <input type="checkbox"  :checked="item.finished"  @click="changeState(index)"  >  <!--通過item.finished值來動態綁定class-->  <span :class="{'finish':item.finished}">{{item.content}}</span>  <!--按鈕的顏色通過動態添加class來實現，然後按鈕的文本通過改變isDel來實現，isDel的改變也是通過changeState方法來操作的-->  <button @click="deleteItem(index)"   class="del"   :class="{'native':item.finished === true}"  >{{isDel}}</button> </li></ul><p class="empty" v-if="!inputList.length">暫無內容</p>

然後我們講解changeState方法

//改變選中狀態   changeState: function (index) {    // this.inputList[index].finished = true 錯誤：這樣如果點擊第二次，無法回到false，就會一直true狀態    this.inputList[index].finished = !this.inputList[index].finished;    // 根據finished的值來對應的修改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);   }   }

總結

以上所述是小編給大家介紹的vue組件編寫之todolist組件執行個體詳解，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！