todos Vue
<div id="todo-list-example">
<input
v-model="newTodoText"
v-on:keyup.enter="addNewTodo"
placeholder="Add a todo"
>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</div> Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">X</button>\
</li>\
',
props: ['title']
}) new Vue({
el: '#todo-list-example',
data: {
newTodoText: '',
todos: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})
todos Vue的更多相关文章
- vue父子通信
首先在组件创建中创建子组件Todos.vue <template> <div class="hello"> <h1>todos show< ...
- Vue作用域插槽:用作循环结构的模版
一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list=&q ...
- vue 【 子子组件 => 子组件 => 父组件 】 的事件和参数的传递
1,子子组件 TodoItem.vue <template> <div class="todo-item" :class="{'is-co ...
- vue - 子组件向父组件 传递方法和参数
1,子组件 TodoItem.vue : <template> <div class="todo-item" :class="{'is-compl ...
- [Vuex] Split Vuex Store into Modules using TypeScript
When the Vuex store grows, it can have many mutations, actions and getters, belonging to different c ...
- [Vuex] Perform Async Updates using Vuex Actions with TypeScript
Mutations perform synchronous modifications to the state, but when it comes to make an asynchronous ...
- [Vuex] Create a Vuex Store using TypeScript
A Vuex store centralizes the state of your app, making it easy to reason about your state flow. In t ...
- Nuxt使用Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 基础知识这里不再重述,学习的话请自行到官网 ...
- 框架入门经典项目TodoMVC
一.项目介绍 ①地址:http://todomvc.com/ ②GitHub下载模板 ③通过npm下载模板的样式 ④通过npm下载Vuejs ⑤项目文件,主要修改app.js和index.html两个 ...
随机推荐
- 游戏用户接口设计的一些小原则(摘自 game coding complete)
1.没有坏之前不要修理 2.简单的操作却有非常复杂的结果时,要小心设计. 3.记得给玩家反馈. 4.玩家不知道该功能,可能就根本不会用这个功能. 5.观察并持续改进.(给不熟悉该设计的人玩,站在他们后 ...
- ylbtech-LanguageSamples-PythonSample
ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-PythonSample 1.A,示例(Sample) 返回顶部 本示例演示如何使用 C ...
- Python绘制直方图 Pygal模拟掷骰子
#coding=utf-8 from random import randint class Die(): """骰子类""" def __ ...
- Servlet3.0提供的异步处理
用属性asyncSupported=true开启Servlet对异步的支持. 在请求时,在request.startAsync()抛java.lang.IllegalStateException: N ...
- JOptionPane的经常使用4种对话框
JOptionPane类有4个用于显示对话框的静态方法: 消息.选项.确认,输入对话框 showMessageDialog://显示一条消息并等待用户OK showConfirmDialog://显示 ...
- WIN7如何查找网络打印机
1 在开始菜单中输入"打印机"并点击"添加打印机" 2 点击下面一个,并搜索家庭组的打印机,一般可以搜到(注意这台电脑不能关机或睡眠). 3 查找并添加会需要安 ...
- P2P终结者和反P2P终结者如何使用
1 安装软件并运行,首先扫描网络,第一台控制机就是自己,你可以查看IP,和命令提示符下的IP吻合. 2 点击高级选项,指定本机网络环境和网卡 3 控制规则设置,首先设置全局限速模板,其他的差不多. 4 ...
- 算法笔记_105:蓝桥杯练习 算法提高 上帝造题五分钟(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 第一分钟,上帝说:要有题.于是就有了L,Y,M,C 第二分钟,LYC说:要有向量.于是就有了长度为n写满随机整数的向量 第三分钟,YUHC ...
- cocos2d-x:初探TestLua
打开\cocos2d-x-2.2.3\cocos2d-win32.vc2012.sln sln里面有个TestLuaproject 初探完成...(不要逗) 启动一下project,cocos2d-x ...
- appendChild append insertBefore prepend
CreateTime--2017年11月2日16:57:59 Author:Marydon appendChild()与append() insertBefore()与prepend()区别与联系 ...