简单的todolist的demo
放上代码：
<!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的更多相关文章
- 使用React并做一个简单的to-do-list
1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...
- 一个简单的webservice的demo（下）winform异步调用webservice
绕了一大圈,又开始接触winform的项目来了,虽然很小吧.写一个winform的异步调用webservice的demo,还是简单的. 一个简单的Webservice的demo,简单模拟服务 一个简单 ...
- 一个简单的Webservice的demo(中)_前端页面调用
首先新建项目,这里有两种调用方式,为了能方便理解,新建页面WebserviceTest如下图: 先引用写好的服务,这里用上次写好的服务.见上次写的一个简单的Webservice的demo,简单模拟服务 ...
- 一个简单的Webservice的demo,简单模拟服务
前段时间一直在学习WCF,匆匆忙忙的把<WCF全面解析>和<WCF服务编程>看了一遍,好多东西都不是很懂,又听了一下WCF分布式开发的网络教程,算是马马虎虎的明白点了.回顾了一 ...
- 一个简单的servlet的demo
javaweb 的应用我们需要参考javaee api 查找servlet接口 javax.servletInterface Servlet All Known Subinterfaces: Ht ...
- .exe简单的更新软件demo
百度网盘源码加文件:http://pan.baidu.com/s/1qYe2Vgg 功能:通过网站更新用户的软件,需要联网,也可以通过本地网站更新局域网用户软件. 根本实现:1.一个网站(本地就可以) ...
- vue结合element-ui做简单版todolist
结合element-ui首先需要npm安装element-ui npm i element-ui -S: 然后在入口文件中引入: import ElementUI from 'element-ui'; ...
- 利用前端三大件（html+css+js）开发一个简单的“todolist”项目
一.介绍 todolist,即待办事项.在windows android ios上参考微软家出的那个To-Do应用,大概就是那样的.我这个更简单,功能只有“待办” “已完成”两项,并且是在浏览器打开的 ...
- springboot+dubbo简单分布式RPC调用demo
使用springboot+dubbo搭建RPC入门案例 本文背景简述: 最近在学习公司的一套RPC框架,初步接触的时候感觉挺复杂的.但是知道其原理肯定是和dubbo很相似的,毕竟都是RPC框架嘛,只是 ...
随机推荐
- 【Makefile】Makefile中的赋值符号=、:=、?=、+=
Makefile中主要有四个赋值符号: = 是最基本的赋值:= 是覆盖之前的值?= 是如果没有被赋值过就赋予等号后面的值+= 是添加等号后面的值 1.“=” “=”赋值:make会将整个makefil ...
- mybatis之动态SQL操作之更新
1) 更新条件不确定,需要根据情况产生SQL语法,这种情况叫动态SQL /** * 持久层*/ public class StudentDao { /** * 动态SQL--更新 */ public ...
- python之scrapy爬取某集团招聘信息以及招聘详情
1.定义爬取的字段items.py # -*- coding: utf-8 -*- # Define here the models for your scraped items # # See do ...
- layui-简单的登录注册界面【转载】
register.html 源代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 ...
- RabbitMQ 使用参考
http://www.zouyesheng.com/rabbitmq.html 安装 基本概念 基本形式 持久化 调度策略 5.1. fanout 5.2. direct 5.3. topic 5.4 ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_6-03 高级篇幅之zuul常用问题分析
笔记 3.高级篇幅之Zuul常用问题分析和网关过滤器原理分析 简介:讲解Zuul网关原理和过滤器生命周期, 1.路由名称定义问题 路由映射重复覆盖问题 ...
- docker 搭建私有云盘 Seafile
缘起 现如今各种云存储服务其实挺多的,国外有经典的DropBox.Google Drive.微软的OneDrive等,国内也有可以免费使用的各种云. 那么为什么想要搭建私有云存储呢?主要是本着“自己的 ...
- vs把asp.net旧的项目名称全部修改
1 先打开项目,把名称全部替换掉,然后把解决方案,程序集名称全部替换掉. 2 重新生成,清理,关闭项目. 3 把.sln文件用文本编辑器打开,替换里面的名称,然后把文件夹名称都修改好.d 4.打开项目 ...
- Python 面向对象(下)
本篇博客承接自Python 面向对象(上) 四. 继承,实现,依赖,关联,聚合,组合 Python面向对象--继承,实现,依赖,关联,聚合,组合 五. 特殊成员 Python面向对象--类的特殊成员 ...
- 产品之我见（3）-ZEN在产品上的延伸
ZEN 在WIKIPEDIA上的解释是这样的: 禅,禅宗强调严格的自我控制能力,冥想实践,洞察到的事物性质,而这种洞察力在日常生活中的个人表达,尤其是为了别人的利益. 因此,它不再强调对经典和学说的了 ...