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 ...
随机推荐
- VMware下Ubuntu全屏显示
开始是这样的 完了之后应该是这样的 1.点开菜单栏的 虚拟机---------> 安装VMware Tools 安装完了之后桌面会出现一个这样的图标 双击这个DVD,进去之后左侧目录出现了 ...
- Android项目中实现native调用
转载自搜狗测试公众号,本人学习使用,侵权删 最近小编在做公司输入法项目中java与native交互部分的测试,先简单学习了java代码调用native代码的实现原理,本次与大家一起分享jni协议,了解 ...
- js实现点击按钮控制展开与收起.
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- 我的浏览器标签同步方案：坚果云+Floccus
前言 floccus github地址: https://github.com/marcelklehr/floccus Floccus插件是一款浏览器书签收藏同步插件,支持Chrome和Firefox ...
- Oracle实现主键自增的几种方式
数据库作为一个系统的核心,数据库设计的1NF就是一个表结构必须有唯一约束也就是主键,Oracle数据库本身没有自增机制,不像MySQL直接使用关键字AUTO_INCREMENT自动加一,所以需要我们去 ...
- flexbox布局一
flexbox布局是一种新的css布局,flex是flexible的简写,所以flexbox就可以理解为可伸缩布局.而可伸缩性也是flexbox布局的亮点,至于如何可伸缩,看完下面的介绍大家应该就会有 ...
- openFrameworks Download
{ https://openframeworks.cc/zh_cn//download/ } 0.10.1 是最新发布的版本. 这个版本是修改了一些BUG的小版本,与版本 0.10.1100%兼容而且 ...
- asp.net MVC遇到的问题
参考:http://blog.csdn.net/chenqiangdage/article/details/48996101 asp.netMVC 如何解决“上下文模型已在数据库创建后发生更改” 问题 ...
- “今日头条杯”首届湖北省大学程序设计竞赛--F. Flower Road
题目链接:点这 github链接:(包含数据和代码,题解):点这 链接:https://www.nowcoder.com/acm/contest/104/E来源:牛客网 题目描述 (受限于评测机,此题 ...
- 转-C++之手写strcpy
转自:strcpy函数的实现 知strcpy函数的原型是: char *strcpy(char *dst, const char *src); 实现strcpy函数 解释为什么要返回char * 假如 ...