Vue Todo_List 小實作

寫Vue一陣子了，但蠻少發文的所以來介紹一點小實作，經典又簡單的todolist，有輸入、刪除、編輯、已完成的功能。

主要學習點:

• V-for的使用。
• 資料的雙向、單向綁定。
• V-if的簡單使用。
• 事件觸發的綁定。

那就先來做個樣板吧!!

<template>
  <div id="app">
    <input/>
    <ul>
      <li v-for="(item,index) in items" :key="index" :class="{finished:item.isFinished}">
       <span>{{item.label}}</span>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        items: [
          {
            label: 'read books',
            isFinished: false
          },
          {
            label: 'eat dinner',
            isFinished: true
          }
        ],
      }
    } 
  }
</script>
<style>
  .finished {
    text-decoration: line-through;
  }
</style>

這樣的樣子會呈現這樣，單純的輸入與一開始的內容。

透過V-for來列出我們物件裡面的資料，並透過V-bind綁定class並與style配合劃掉已完成的事項，非常簡單就做出單純的layout。接下來我們要輸入文字並添加事項囉!

<input class="addtext" @keyup.enter="Enter" v-model="newlist"/>

在input的地方加上V-on鍵盤按下去Enter並觸發Enter事件，然後讓我們輸入的文字綁定到newlist上。

<script>
  export default {
    data () {
      return {
        //items some code....
        newlist:""
      }
    },
    methods:{
      Enter(){
        this.items.push({label:this.newlist,isFinished:false});
        this.newlist="";
      }
    }
  }
</script>

script的部分新增newlist字串存的地方，methods裡放入input的Enter點擊事件，按下enter同時把當時輸入的值，push到我們的items裡面，並清空newlist。

這樣就能打完字按下enter並能夠新增事項了!!!!!!!
接下來我們要透過checkbox來勾選，把勾選的事項變成這樣，所以需要再透過v-for一起產生checkbox。

<ul>
  <li v-for="(item,index) in items" :key="index" :class="{finished:item.isFinished}">
    <input type="checkbox" :checked="item.isFinished" @change="endlist(item)"/>
    <span>{{item.label}}</span>
  </li>
</ul>

並在checked部分利用v-bind綁定item.isFinished當為true則是勾選反之，綁定v-on:change來監測改變狀態時也要改變isFinished的狀態，注意要傳item的值進去這樣function才知道v-for渲染出來的東西哦。

  endlist(item){
        item.isFinished =! item.isFinished;
      }

在methods裡面再加一個endlist function來改變item.isFinished的狀態，這樣我們就能控制事項完成與否啦。

既然已經能劃掉完成事項，那就要來個刪除和編輯囉!
所以需要新增兩個按鈕來完成這個事項，還有編輯的時候能修改現在事項的內容。

<template>
  <div id="app">
    <input class="addtext" @keyup.enter="Enter" v-model="newlist"/>
    <ul>
      <li v-for="(item,index) in items" :key="index" :class="{finished:item.isFinished}">
       <input type="checkbox" :checked="item.isFinished" @change="endlist(item)"/> 
       <span v-if="!item.isEdit">{{item.label}}</span>
       <input @keyup.enter="update(index,item.label)" v-if="item.isEdit" v-model="item.label">
       <button @click="edit(index)">編輯</button>
       <button @click="remove(index)">刪除</button>
      </li>
    </ul>
  </div>

</template>

<script>
  export default {
    data () {
      return {
        items: [
          {
            label: 'read books',
            isFinished: false,
            isEdit:false
          },
          {
            label: 'eat dinner',
            isFinished: true,
            isEdit:false
          }
        ],
        newlist:"",
        updatetext:""
      }
    },
    methods:{
      Enter(){
        this.items.push({label:this.newlist,isFinished:false,isEdit:false});
        this.newlist="";
      },
      endlist(item){
        item.isFinished =! item.isFinished;
      },
      remove(index){
        this.items.splice(index,1);
      },
      edit(index){
        this.items[index].isEdit =! this.items[index].isEdit;
      },
      update(index,label){
        this.items[index].label=label;
        this.items[index].isEdit =! this.items[index].isEdit;
      }
    }
  }
</script>

透過事件傳入index並用splice來完成刪除事項，然後v-if來控制元件的顯示和不顯示，並且再次修改狀態，大概就是個簡單的todolist啦~~

github程式碼在這裡