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

最新推荐文章于 2020-06-10 13:52:31 发布

zhaihaohao1

最新推荐文章于 2020-06-10 13:52:31 发布

阅读量243

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/88943894

版权

Vue 专栏收录该内容

33 篇文章 3 订阅

订阅专栏

本文通过Vue.js实现了一个TodoList的示例应用，包括源码展示和下载链接，帮助读者加深对Vue实际开发的理解。

摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述

源码（复制即可运行）
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>

源码下载：
vuedemo08
https://download.csdn.net/download/zhaihaohao1/11112017