vue組件編寫之todolist組件實例詳解

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

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

<template>
<div class="ex1">
  <div class="input-text">
 <label for="inputNum">請輸入：</label>
 <input type="text" 
    id="inputNum" 
    name="inputNum" 
    placeholder="edit..">

 <!--列表內(nèi)容-->
 <ul>
  <li>
   <input type="checkbox" >
   <span>dd</span>
   <button>刪除</button>
  </li>
 </ul>
 <p class="empty" v-if="!inputList.length">暫無內(nèi)容</p>
  </div>
</div>
</template>
<script>
 export default {
  data () {
   return {
    inputList: [],
    inputItem: {
     content: '',
  finished: false,
  deleted: false
 }
   }
  },
  methods: {
   //將輸入框的數(shù)據(jù)添加到list中  
   addItem: function() {}
   //改變選中狀態(tài)
   changeState: function(index) {},
   //刪除列表元素
   deleteItem: function(index) {}
  }
 }
</script>

<template>
<div class="ex1">
  <div class="input-text">
 <label for="inputNum">請輸入：</label>
 
  <!--@keydow.13表示回車的事件-->
  <!--v-model是為了讓輸入的數(shù)據(jù)和inputItem.content同步-->
  
  <input type="text" id="inputNum" name="inputNum" placeholder="edit.."
   @keydown.13="addItem" v-model="inputItem.content" class="edit"
  >
  <!--列表內(nèi)容-->
  <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">暫無內(nèi)容</p>
  </div>
</div>
</template>
<script>
 export default {
  data () {...省略  },
  methods: {
   addItem: function() {
     this.inputList.push(this.inputItem);
     /*
     為什么我們要對inputItem再次初始化？
     解答：因為每次在輸入框中輸入數(shù)據(jù)，都會同時改變inputItem的content屬性，
     然后我們點擊回車，該inputItem的整個對象都添加進inputList中，
     按正常邏輯來說，inputList內(nèi)的內(nèi)容和inputItem是沒有聯(lián)系了。
     如果我們此時不對inputItem進行再次初始化，那么就會發(fā)現(xiàn)你再次在輸入框中輸入數(shù)據(jù)的時候，
     會同時改變下面的list的值，簡易你們把初始化的代碼去掉，運行下試試看！
     */
  this.inputItem = {
      content: '',
      finished: false,
      deleted: false
  };
   },
   //改變選中狀態(tài)
   changeState: function(index) {},
   //刪除列表元素
   deleteItem: function(index) {}
  }
 }
</script>

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

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