html

    <input type='text' v-model="todoItem" v-on:keyup.enter='addItem'>
<ul>
<li v-for="(item,index) in items" is="todo-list" v-bind:info="item" v-on:remove="removeItem(index)"></li>
</ul>

js

 /*todo-list demo*/
Vue.component('todo-list',{
props:['info'],
template:'<li>{{info}}<button v-on:click="$emit(\'remove\')">remove</button></li>'
}) var app=new Vue({
el:'#app',
data:{
todoItem:'',
items:['item1','item2','item3','item4','item5']
}
});

vue demo todo-list的更多相关文章

  1. 两个Vue Demo

    1 实现 person list <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. 第 2 篇:上手 Vue 展示 todo 列表

    作者:HelloGitHub-追梦人物 追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutor ...

  3. Framework7+vue demo

    最近看了下f7+vue做了几个测试页面,商品图片来自淘宝,代码等有时间了再传,

  4. vue环境的搭建与第一个demo

    参考两个博客 1 2 git.npm和淘宝镜像的安装过程过程省略了,直接开始webpack + vue-cli + 创建demo 首先,在磁盘创建一个文件夹,命名为vue-projects,里面再建一 ...

  5. vue之综合Demo:打沙袋

    demo7.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1 ...

  6. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  7. Vue.js 入门:从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  8. Vue.js 实战教程(附demo)

    在实战之前,你需要对vuejs的基础语法有一定的了解,可以通过以下几个途径进行学习: vue.js官方文档:https://cn.vuejs.org/v2/guide/index.html vue.j ...

  9. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

随机推荐

  1. 【概率dp】C. Race to 1 Again

    https://www.bnuoj.com/v3/contest_show.php?cid=9146#problem/C [题意] 给定一个数D,每次随机选取这个数的一个因子x得到新的数D=D/x,知 ...

  2. Java 学习(4):基本数据类型,变量类型

    目录 --- 基本数据类型 --- 变量类型 基本数据类型 变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用 ...

  3. 【HDOJ6319】Ascending Rating(单调队列)

    题意: 思路: 倒着来是因为这样可以维护每一个当过最大值的数,而正着不行 #include<cstdio> #include<cstring> #include<stri ...

  4. BZOJ1573: [Usaco2009 Open]牛绣花cowemb

    求半径d<=50000的圆(不含边界)内n<=50000条直线有多少交点,给直线的解析式. 一开始就想,如果能求出直线交点与原点距离<d的条件,那么从中不重复地筛选即可.然而两个kx ...

  5. type和metaclass元类

    元类type 1. 创建类的两种方式 (都是由type元类创建) 方式一: class Foo(object): # 默认metaclass = type, 当前类, 由type类创建 a = 'aa ...

  6. Java日志框架-logback配置文件多环境日志配置(开发、测试、生产)(原始解决方法)

    说明:这种方式应该算是最通用的,原理是通过判断标签实现. <!-- if-then form --> <if condition="some conditional exp ...

  7. Eclipse同时显示多个控制台项目的输出

    操作步骤: 1.运行项目1,运行项目2 2.在Exlipse中选择这两个的控制台进行切换

  8. android手机rootROM下载地址

    https://download.mokeedev.com/ https://download.lineageos.org/

  9. delphi 修改文件夹名和文件名

    unit Unit1; interface uses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Form ...

  10. java quartz的使用,做时间轮询调用 CronTrigger

    import org.quartz.Job; import org.quartz.JobExecutionContext; import org.quartz.JobExecutionExceptio ...