v-if和v-for一起使用的幾個方法

方法一（推薦）：

不帶if

<ul>
<li
v-for="(item, index) in list"
:key="index"
>
{{ item.title }}
</li>
</ul>

帶if

<ul v-for="(item, index) in list" :key="index">
   <li v-if="item.checked">{{item.title}}</li>
</ul>

 data () {  // 業務邏輯里面定義的數據
    return {
      todo: '',
      list: [{
        title: '111111',
        checked: true
      }, {
        title: '22222',
        checked: false
      }]
    }
  }

 

方法二（通過計算屬性）：過濾掉不需要的數據，剩下需要的數據再利用v-for循環遍歷取出渲染

<h2>進行中</h2>
<ul>
   <li v-for="(item, index) in todoList" :key="index">
      <input type="checkbox">{{item.title}} ----- <button @click="removeData(index)">刪除/button>
   </li>
</ul>
<br>
<h2>已完成</h2>
<ul>
   <li v-for="(item, index) in doneList" :key="index" >
      <input type="checkbox">{{item.title}} ----- <button @click="removeData(index)">刪除/button>
   </li>
</ul>

data () {  // 業務邏輯里面定義的數據
    return {
      todo: '',
      list: [{
        title: '111111',
        checked: true
      }, {
        title: '22222',
        checked: false
      }]
    }
  }

computed: {
    todoList: function() {
      return this.list.filter(function (item) {
        return item.checked
      })
    },
    doneList: function() {
      return this.list.filter(function(item) {
        return !item.checked
      })
    }
  }