vue小白教程：list的添加、移动、删除小练习

功能描述

1、点击“增加”按钮添加新项
2、“进行中”显示勾选项，“已完成”中显示未勾选项
3、通过点击勾选框实现移动
4、点击“删除”删除该项

代码

<template>
  <div>
    <input v-model="text"><!--输入-->
    <button @click="addList">+增加</button>

    <h2>进行中</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="item.checked"><!--v-if判断是否选中，选中即显示-->
        <input type="checkbox" v-model="item.checked"><!--v-model绑定状态-->
        {{item.title}}
        <button @click="delList(key)">删除</button>
      </li>
    </ul>
    <h2>已完成</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="!item.checked"><!--v-if判断是否选中，不选中即显示-->
        <input type="checkbox" v-model="item.checked">
        {{item.title}}
        <button @click="delList(key)">删除</button>
      </li>
    </ul>
  </div>
    
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      text:'',
      list:[
        {
          title:'1',
          checked:true//checked属性表明是否选中
        },
        {
           title:'2',
          checked:true
        }
      ]
    }
  },
  methods:{
    addList(){
      this.list.push({//添加到list中
        title:this.text,
        checked:true
      });
    },
    delList(i){
      this.list.splice(i,1);//删除
    }
  }
}
</script>

效果