使用vue如何寫todolist元件？

這篇文章主要介紹了vue元件編寫之todolist元件的實例講解，本文給大家介紹的非常詳細,需要的朋友可以參考下

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

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

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

<template>
 <p>
  <p>下面这一行就是定义的组件名称</p>
  <todo-list></todo-list>
  <router-view></router-view>
 </p>
</template>
<script>
/*

    1. 透過import來引進我們的子元件drawerLayout

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

    3.在我們的template中按照html標籤的形式使用元件，todoList就是

#注意：

    (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>
<p class="ex1">
  <p 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>
  </p>
</p>
</template>
<script>
 export default {
  data () {
   return {
    inputList: [],
    inputItem: {
     content: &#39;&#39;,
  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>
<p class="ex1">
  <p 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>
  </p>
</p>
</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: &#39;&#39;,
      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="{&#39;finish&#39;:item.finished}">{{item.content}}</span>
  <!--按钮的颜色通过动态添加class来实现，然后按钮的文本通过改变isDel来实现，isDel的改变也是通过changeState方法来操作的-->
  <button @click="deleteItem(index)"
   class="del"
   :class="{&#39;native&#39;: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);
   }
   }

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

利用AngularJS如何實作下載excel檔案功能

在vue中如何進行config設定（詳細教學）

在JS中如何實現多物體運動（詳細教學）

#

以上是使用vue如何寫todolist元件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！