iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
Modern Web

Déjà-vu ? 要 Vue 過才知道系列 第 14

Vue 實作一個簡單的 Todo List [下]

像隻無頭蒼蠅一樣的學習ㄧ定會徒勞,但有時我們成了無頭蒼蠅卻不自知,唉。

在上一篇我們討論到在實作之前,先把需要的功能和邏輯一一列出來,包含可能會用到的 v-指令,這樣真的可以幫我們更快速且精準地進行實作。

  • 把已經輸入的列表結構列出來(v-for)
  • 獲取使用者的輸入值(v-model)
  • enter 時新增資料(v-on,.enter)
  • 清空輸入框(v-on)
  • [刪除]點擊刪除指定的 item 時會 Item 刪掉(v-on splice index)
  • [統計]會顯示輸入的 Item 有幾個({{綁定陣列的長度}})
  • [清空]點清空按鈕時會全部清空(v-on)
  • [隱藏]在沒有內容的時候把 Item 數量和環不清除的區塊隱藏(v-show)

我們可以先看看範例(並沒有特別去把畫面弄得美美的,純粹以功能來做,所以抱歉畫面就很陽春囉~)
Vue_Base_todoListSimple

HTML 的部分

  • 在輸入框裡指定為輸入文字格式type="text" ,雙向綁定為輸入值inputValue,再監聽輸入時按下 enter 鍵時觸發「增加」內容的方法inputValue
  • v-for的方式把在todos裡陣列的內容讀取出來,並利用陣列的 index 值+1,以便顯示從 1 開始,並在後面加上一個刪除的按鈕,並綁定監聽事件的removeTodo(index)方法,帶入 index 來抓取陣列的唯一值,遮樣才能知道要刪除的是哪一筆。
  • 以陣列長度來顯示總共有幾筆資料,必且此區域以v-if判斷,如果陣列長度不等於 0 才顯示,不然隱藏此區塊。
<div id="app">
  <input type="text" placeholder="enter your todo" @keyup.enter="addTodo()" v-model="inputValue"/>
  <hr/>
  <div>
    <p v-for="(item,index) in todos">{{index+1}}.{{item}}
      <button @click="removeTodo(index)">X</button>
    </p>
  </div>
  <hr/>
  <div v-if="todos.length !=0">
    Total : {{todos.length}} todo
    <button @click="clearAll">Clear All</button>
  </div>
</div>

接下來就來處理 Vue 實例裡的 data 資料初始與方法:
JavaScript 的部分

const vm = new Vue({
  el: '#app',
  data: {
    todos: ['學習', '睡覺', '做飯'], // 陣列資料裡的預設值,為了觀察先放入幾個元素為進入畫面的顯示,當然,也可以設空陣列,
    inputValue: '', // 輸入框先初始空字串
  },
  methods: {
    addTodo: function () {
      // 增加 todo 的方法
      this.todos.push(this.inputValue); // 使用陣列方法push()把輸入值放到陣列裡
      console.log(this.todos);
      this.inputValue = ''; // 1把輸入框清空
    },
    removeTodo: function (index) {
      // 刪除 todo
      this.todos.splice(index, 1); // 使用陣列方法splice(指定的index開始,刪除一筆),依照抓到的 index 刪除
    },
    clearAll: function () {
      // 清除所有
      this.todos = []; // 把儲存陣列的 todos 用空陣列賦值清空
    },
  },
});

使用 Vue 來實作 TodoList 是不是沒想像的難?我們也可以試著增加一些功能,例如修改、畫線或排序,會發現用 Vue 來做這些功能也不會特別困難喔!

每日一句法文有益身心:Tu me plais ! --> 舉.麼.僕勒! --> 我喜歡你(妳)! --> 超級好用,學起來 !


上一篇
Vue 實作一個簡單的 Todo List [上]
下一篇
Vue 的實例與生命週期 Instance-life-cycles
系列文
Déjà-vu ? 要 Vue 過才知道30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言