vue demo todo-list
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的更多相关文章
- 两个Vue Demo
1 实现 person list <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- 第 2 篇:上手 Vue 展示 todo 列表
作者:HelloGitHub-追梦人物 追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutor ...
- Framework7+vue demo
最近看了下f7+vue做了几个测试页面,商品图片来自淘宝,代码等有时间了再传,
- vue环境的搭建与第一个demo
参考两个博客 1 2 git.npm和淘宝镜像的安装过程过程省略了,直接开始webpack + vue-cli + 创建demo 首先,在磁盘创建一个文件夹,命名为vue-projects,里面再建一 ...
- vue之综合Demo:打沙袋
demo7.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1 ...
- Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
- Vue.js 入门:从零开始做一个极简 To-Do 应用
Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言 学习 Vue ...
- Vue.js 实战教程(附demo)
在实战之前,你需要对vuejs的基础语法有一定的了解,可以通过以下几个途径进行学习: vue.js官方文档:https://cn.vuejs.org/v2/guide/index.html vue.j ...
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
随机推荐
- bzoj 3207 花神的嘲讽计划Ⅰ 主席树+hash
花神的嘲讽计划Ⅰ Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 3112 Solved: 1086[Submit][Status][Discuss] ...
- Java设计模式之(设计模式的概述)
概述: 设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用.设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案.这些解决方案是众多软件开发 ...
- 【HDOJ6343】Graph Theory Homework(贪心)
题意: 给定n个点,每个点有权值a[i],从A走到B的花费是下取整sqrt(a[i]-a[j]),求从1号点走到n号点的最小花费 1<=n,a[i]<=1e5 思路: #include&l ...
- 使用imageMagick 制作圆角矩形和图片加水印
制作圆角矩形好图片水印都是图片合成的操作 composite -gravity southeast mask175.png src.jpg dest.jpg -gravity southeast ...
- JAVA中json转换为集合(对象)之间的相互转换
字符串转换为json对象: String strResult = RestUtil.getRestContent(url+"/service/peccancy/myOrderList&quo ...
- BZOJ 2308 莫队入门经典
题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=2038 参考博客 https://www.cnblogs.com/Paul-Guderi ...
- [Bzoj2286][Sdoi2011]消耗战(虚树模板题附讲解)
2286: [Sdoi2011]消耗战 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 4896 Solved: 1824[Submit][Statu ...
- Windows和linux双系统——改动默认启动顺序
电脑上装了Windows 7和Ubantu双系统,因为Linux系统用的次数比較少而且还是默认的启动项对此非常不能容忍,因此得改动Windows为默认的启动项. 因为电脑上的系统引导程序是GRUB,因 ...
- ZOJ 3632 Watermelon Full of Water (线段树 区间更新 + dp)
题目大意: 让每天都能吃到西瓜. 最少须要花多少钱. 思路分析: dp[pos] 就表示 要让 前i天每天都有西瓜吃.最少须要花多少钱. 那么假设你买这个西瓜的话. 那么这个西瓜能吃的持续时间都要更 ...
- 微信通过openID发送消息/后台post、get提交并接收数据 C# .NET 配置404,500等错误信息 连接字符串
微信通过openID发送消息/后台post.get提交并接收数据 控制器:下面是post发送消息(微信不支持从前台发送数据,之前试过,报错,需要跨域,跨域的问题解决后还不行,最后发现之后后端提交 ...