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 ...
随机推荐
- 2019-9-2-C＃委托
title author date CreateTime categories C#委托 lindexi 2019-09-02 12:57:37 +0800 2018-2-13 17:23:3 +08 ...
- Linux主机名的修改以及配置
查询主机名: [root@localhost ~]# hostnamelocalhost.localdomain [root@localhost ~]# vim /etc/sysconfig/netw ...
- linux 虚拟机网卡配置
第一种虚拟机 我们常用的虚拟机vmware虚拟机 今天为了学习ngnix,所以配了两台虚拟机.一个centos7 ,一个redhat. 哇啦哇啦安装,so easy,对吧....我选择的是精简版 ...
- 【扯淡篇】CTSC/APIO/SDOI R2时在干什么？有没有空？可以来做分母吗？
注意: 我比较弱, 并没有办法把外链bgm搞成https, 所以大家可以选择"加载不安全的脚本"或者把https改成http以获得更好的阅读体验! 据说, 退役了要写写回忆录. 但 ...
- Python删除文件夹
import os os.rmdir('OS-Demo-2') os.removedirs('OS-Demo-3/sub-Dir-1') os.removedirs()会自动将上一级文件夹也删除,谨慎 ...
- 【leetcode】951. Flip Equivalent Binary Trees
题目如下: For a binary tree T, we can define a flip operation as follows: choose any node, and swap the ...
- 自定义checkbox,radio样式
input[type=radio] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 15px; ...
- visual_c++外挂教程(详细)
课程分四个大章节 初级篇,中级篇,进阶篇,高级篇 初级篇内容:编写一个完整的,简单的外挂 C++的数据类型:Byte,Word,DWORD,int,float API函数的调mouse_event,G ...
- LInux文件基础知识和文件目录操作（二）文件I/O操作
1.文件I/O操作分为两部分来讲解: 第一部分是非缓冲文件操作,这种操作适合于比较小规模文件的读写和对实时性要求很高的设备的数据通信,这类操作是系统调用提供的: 第二部分是缓冲文件操作,所面向的则是大 ...
- Java 反射获取私有方法
通常我们创建一个类时,它的私有方法在类外是不可见的,但是可以通过反射机制来获取调用.具体的反射机制的介绍大家自己百度. 所以反射可能会破坏我们的单例模式,当然解决方案也是有的,就是做个标记记录次数,第 ...