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
      })
    }
  }