Vue学习7----demo练习，实现todolist效果2

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88943894

效果图：

源码（复制即可运行）
App.vue

<!--demo练习1，实现todolist效果1-->
<template>
  <div id="app">

    <input type="text" v-model='todo' /><button @click="add()">增加</button>
    <br>
    <!--v-model把把输入框中的数据绑定到todo变量-->
    <h2>进行中</h2>
    <ul>
     <!--判断没有选中的时候显示的列表-->
      <li v-for="(item,key) in list" v-if="!item.checked">

        <input type="checkbox" v-model='item.checked'> {{item.title}}   ----  <button @click="removeData(key)">删除</button>
      </li>
    </ul>


    <br>
    <h2>已完成</h2>
    <ul>
      <!--判断选中的时候显示的列表-->
      <li v-for="(item,key) in list" v-if="item.checked">

        <input type="checkbox" v-model='item.checked'> {{item.title}} ----<button @click="removeData(key)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        todo:'' ,
        list: [

          {
            title: '录制nodejs',
            checked: true
          },
          {
            title: '录制ionic',
            checked: false
          }
        ]
      }
    },
    methods: {
      //添加数据
      add(){
        this.list.push(
          {
            title: this.todo,
            checked: false,
          }
        );
      },
      //删除数据
      removeData(key){
        this.list.splice(key,1);
      }
    }
  }
</script>

<style lang="scss">

</style>

源码下载：