放上代码：

 <!DOCTYPE html>

 <html lang="zh">

 <head>

     <meta charset="UTF-8">

     <script src="https://unpkg.com/vue/dist/vue.js"></script>

     <title></title>

     <style type="text/css">

         #div_form{

             border:1px solid #990000;

             width: 50%;

         }

     </style>

 </head>

 <body>

     <div id="div_form">

         <form>

             <label for="input_id">TODO:</label>

             <input type="text" id="input_id" placeholder="e" v-model="input_data"/>

             <button @click.prevent="Add">Add</button>

         </form>

         <ul>

             <li

             is="todo-item"

             v-for="(todo,title) in todos"

             :key="todo.id"

             :title="todo.title"

             v-on:remove="todos.splice(title, 1)"

             ></li>

         </ul>

         <!-- <div v-for="(value,name) in todos">

             {{todos[name].id}}

         </div> -->

     </div>

     <script type="text/javascript">

         Vue.component('todo-item',{

             template:`

             <li>

               {{ title }}

               <button v-on:click="$emit('remove')">Remove</button>

             </li>

             `,

             props: ['title']

         })

         new Vue({

             el:"#div_form",

             data:{

                 input_data:'',

                 todos:[

                     {

                         id:1,

                         title:'sfdsf',

                     },

                     {

                         id:2,

                         title:'dsad',

                     },

                     {

                         id:3,

                         title:"fdsfdsf",

                     },

                 ],

                     nextTodoId: 4

             },

             methods:{

                 Add:function(){

                     this.todos.push({

                         id: this.nextTodoId++,

                         title: this.input_data

                     })

                     this.input_data = ''

                 }

             }

         })

     </script>

 </body>

 </html>

放上效果图：

简单的todolist的demo的更多相关文章

  1. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  2. 一个简单的webservice的demo（下）winform异步调用webservice

    绕了一大圈,又开始接触winform的项目来了,虽然很小吧.写一个winform的异步调用webservice的demo,还是简单的. 一个简单的Webservice的demo,简单模拟服务 一个简单 ...

  3. 一个简单的Webservice的demo(中)_前端页面调用

    首先新建项目,这里有两种调用方式,为了能方便理解,新建页面WebserviceTest如下图: 先引用写好的服务,这里用上次写好的服务.见上次写的一个简单的Webservice的demo,简单模拟服务 ...

  4. 一个简单的Webservice的demo,简单模拟服务

    前段时间一直在学习WCF,匆匆忙忙的把<WCF全面解析>和<WCF服务编程>看了一遍,好多东西都不是很懂,又听了一下WCF分布式开发的网络教程,算是马马虎虎的明白点了.回顾了一 ...

  5. 一个简单的servlet的demo

    javaweb  的应用我们需要参考javaee  api 查找servlet接口 javax.servletInterface Servlet All Known Subinterfaces: Ht ...

  6. .exe简单的更新软件demo

    百度网盘源码加文件:http://pan.baidu.com/s/1qYe2Vgg 功能:通过网站更新用户的软件,需要联网,也可以通过本地网站更新局域网用户软件. 根本实现:1.一个网站(本地就可以) ...

  7. vue结合element-ui做简单版todolist

    结合element-ui首先需要npm安装element-ui npm i element-ui -S: 然后在入口文件中引入: import ElementUI from 'element-ui'; ...

  8. 利用前端三大件（html+css+js）开发一个简单的“todolist”项目

    一.介绍 todolist,即待办事项.在windows android ios上参考微软家出的那个To-Do应用,大概就是那样的.我这个更简单,功能只有“待办” “已完成”两项,并且是在浏览器打开的 ...

  9. springboot+dubbo简单分布式RPC调用demo

    使用springboot+dubbo搭建RPC入门案例 本文背景简述: 最近在学习公司的一套RPC框架,初步接触的时候感觉挺复杂的.但是知道其原理肯定是和dubbo很相似的,毕竟都是RPC框架嘛,只是 ...

随机推荐

  1. Java：基础知识点

    1. 面向对象的特征 (1)封装:把过程和数据包围起来,对数据的访问只能通过已定义的界面.即现实世界可以被描绘成一系列完全自治.封装的对象,这些对象通过一个受保护的接口访问其他对象:(2)继承:是一种 ...

  2. 准确率（Precision）、召回率（Recall）以及综合评价指标（F1-Measure）

    在信息检索和自然语言处理中经常会使用这些参数,下面简单介绍如下: 准确率与召回率(Precision & Recall) 我们先看下面这张图来加深对概念的理解,然后再具体分析.其中,用P代表P ...

  3. Linux 查看Tomcat版本信息

    Linux 查看Tomcat版本信息 如果我们想运行在 Linux 下的 Tomcat 版本信息,只需要在 Tomcat 的 bin/ 目录下,运行 version.sh 脚本即可. 1.使用如下命令 ...

  4. phoenix创建表失败：phoenixIOException: Max attempts exceeded

    下面的问题,搞了1天才解决,太坑了,在这里记录一下. 问题现像:执行命令后,1分钟没有返回, 然后报下面的错,偶尔会出现以下不同的报错信息. jdbc:phoenix:10.0.xx.1:2181&g ...

  5. python之selenium元素定位方法

    前提: 大家好,今天我们来学习一下selenium,今天主要讲解selenium定位元素的方法,希望对大家有所帮助! 内容: 一,selenium定位元素 selenium提供了8种方法: 1.id ...

  6. LeetCode刷题7——数字的补数

    一.要求 补数可以直接通过异或运算进行. 二.背景 最近工作中位运算遇到一个问题,温度有正负两种表示,而且还有小数点.例如用四个16进制字节表示,XXXX,其中第一位是占位符,中间两三位为温度的有效值 ...

  7. Python Network Security Programming-1

    UNIX口令破解1.程序运行需求: 其中dictionary.txt文件为破解口令的字典文件,passwords.txt文件为临时存放UNIX系统密码的文件 2.程序源码: import crypt ...

  8. sass与less对比学习

    参考链接:https://blog.csdn.net/luluan_lin/article/details/83749176

  9. 彻底搞懂 Elasticsearch Java API

    说明 在明确了ES的基本概念和使用方法后,我们来学习如何使用ES的Java API. 本文假设你已经对ES的基本概念已经有了一个比较全面的认识. 客户端 你可以用Java客户端做很多事情: 执行标准的 ...

  10. 数据结构之单链表（golang版）

    线性表之单链表 package main //线性表中的链式存储结构 //第一个节点为头节点,并不真实保存数据,头节点基本代表了整个链表 import ( "fmt" ) type ...