vue v-for 组件传值 enter传值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body> <div id="app">
<!--v-on:keyup.enter="addNewTodo"简写成@keyup.enter="addNewTodo"-->
<input type="text"
v-model="newTodoText" v-on:keyup.enter="addNewTodo"
placeholder="add a todo"
/>
<ul>
<li
is="todo-item"
v-for="(todo,index) in todos"
:key="todo.id"
:title="todo.title"
@remove="todos.splice(index, 1)"
></li>
</ul>
</div>
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('todo-item',{
template: '\
<li>\
{{ title }}\
<button @click="$emit(\'remove\')">X</button>\
</li>\
',
props:['title']
})
new Vue({
el:'#app',
data: {
todos: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
newTodoText:'',
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})
</script>
</body>
</html>
vue v-for 组件传值 enter传值的更多相关文章
- vue程序中组件间的传值方式
vue程序在组件中进行传值有多种方式,这里记录我在项目中使用到的三种: 1. 父组件向子组件传值 2. 子组件向父组件传值 3. 通过路由传参 父组件通过props向子组件传值 在子组件script中 ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 「Vue」父子组件之间的传值及调用方法
a.父组件向子组件传值data(){},props数据区别data中的数据可读可写,是自己的数据props是个数组,中的数据是父组件传递过来的,只读不能写<login :dmsg='msg'&g ...
- 【vue】父子组件间通信----传值
官方文档参考 (一)父组件 向 子组件 传值 ①在父组件中调用子组件处,绑定要传的数据data1, 如 <nav :data1=" " ></nav> ...
- vue中兄弟组件间 的传值 bus(可以理解为公共交通)
点击大儿子(头部组件的年月日,下面的都要变化) 就相当于点击了年月日之后,下面的组件重新调接口,参数变化 1.首先随便哪儿写个bus.js 内容如下: import Vue from 'v ...
- Vue非父子组件之间的传值
1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...
- VUE 组件通信、传值
一.通过路由进行带参传值: 两个组件A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({path:'/componen ...
随机推荐
- mysql的一些语法
alter table S61.T6198 modify F12 varchar(30) DEFAULT NULL COMMENT '流水号'; 修改表字段结构. mysql不支持top ,只支持l ...
- 每天一个Linux常用命令 cp命令
Linux cp命令主要用于复制文件或目录 -a:此选项通常在复制目录时使用,它保留链接.文件属性,并复制目录下的所有内容.其作用等于dpR参数组合. -d:复制时保留链接.这里所说的链接相当于Win ...
- Vim: Overwrite read-only file without quiting vim
当你忘记以sudo命令使用vim编辑一个只读文件时,可以执行以下vim命令强制覆写该文件: :w !sudo tee % > /dev/null 命令太长,可在vimrc文件中做命令映射(映射为 ...
- 项目案例之Pipeline流水线发布JAVA项目（三）
项目案例之Pipeline流水线发布JAVA项目(三) 链接:https://pan.baidu.com/s/1NZZbocZuNwtQS0eGkkglXQ 提取码:z7gj 复制这段内容后打开百度网 ...
- #ifdef 宏定义一个main编译客户端服务端2套代码
#include <iostream> using namespace std; #include "ProWrapper.h" #include "Serv ...
- asp.net网站Application_Start疑是不执行的现象
今天遇见了一个很诡异的事情,发布了新代码后,发现在Application_Start中读取的一些配置参数变为空了,最开始我以为是什么特殊的原因程序没有执行Application_Start,导致它们的 ...
- 为何在新建STM工程中全局声明两个宏
在uVision中新建STM32工程后,需要从STM32标准库中拷贝标准外设驱动到自己的工程目录中,此时需要在工程设置->C/C++选项卡下的Define文本框中键入这两个全局宏定义. STM3 ...
- python的代码块缓存机制，小数据池机制。
同一代码块的缓存机制 在python中一个模块,一个函数,一个类,一个文件等都是一个代码块. 机制内容:Python在执行同一个代码块的初始化对象的命令时,会检查是否其值是否已经存在,如果存在,会将其 ...
- ZROI week1
\[ZROI day1\] \[Grid\] 题目描述 给定一个矩阵,小写字母,求一条路径使得从\((1,1) -> (n,m)\),字典序最小,并且每次只能向右或者向下. 题解 先考虑如果没有 ...
- php开发面试题---1、php常用面试题一（PHP有哪些特性）
php开发面试题---1.php常用面试题一(PHP有哪些特性) 一.总结 一句话总结: ①.混合语法:php独特混合了C,Java,Prel以及PHP自创的语法. ②.为动态网页而生:可以比CGI或 ...