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 ...
随机推荐
- 【记录】VScode快捷键大全
记住快捷键能够提高工作效率 Ctrl+Shift+P,F1 展示全局命令面板 Ctrl+P 快速打开最近打开的文件 Ctrl+Shift+N 打开新的编辑器窗口 Ctrl+Shift+W 关闭编辑器 ...
- dubbo-源码阅读之Filter默认实现
SPI配置的默认实现 cache=com.alibaba.dubbo.cache.filter.CacheFilter validation=com.alibaba.dubbo.validation. ...
- vue之路由导航守卫-全局前置守卫
一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... ...
- vbs,修改文件名
一次性能测试记录,因为项目要批量上传文件,奈何文件有50 * 2个,然后系统效验文件名,要不停地修改,找了一些资料整理脚本如下: strFolder = "\\xxxx\2018198_数据 ...
- Java——类的成员之五：内部类
3.6 类的成员之五:内部类 3.6.1 静态内部类 ①静态内部类可以等同看做静态变量. ②内部类重要的作用:可以访问外部类中私有的数据. ③静态内部类可以直接访问外部类的静态数据,无法直接访问成员. ...
- linux POSIX信号量
POSIX信号量机制是3种IPC机制之一,3种IPC机制源于POSIX.1的实时扩展. 创建一个新的命名信号量或者使用一个现有信号量 #include <fcntl.h> #include ...
- JavaWeb开发中遇到的错误:org.apache.catalina.core.StandardWrapperValve invoke
org.apache.catalina.core.StandardWrapperValve invoke 今天写代码,竟然接连遇到这个异常好几次.debug几个小时才弄明白,晕. 上网找了些拼凑下做个 ...
- linux环境下安装PHP的OpenSSL扩展
先安装依赖包:yum install openssl openssl-devel 进入PHP安装包里的OpenSSL文件夹,根据个人的安装包位置不同,此处是 cd /home/local/php.5. ...
- MFC弹出选择文件和选择文件夹代码
选择文件夹 TCHAR szSelectedDir[]; BROWSEINFO bi; ITEMIDLIST *il; bi.hwndOwner = m_hWnd; bi.pidlRoot = NUL ...
- Java-Class-I：javax.servlet.http.HttpServletRequest
ylbtech-Java-Class-I:javax.servlet.http.HttpServletRequest 1.返回顶部 2.返回顶部 1. package com.ylbtech.ap ...