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 ...
随机推荐
- webpack 集成 Typescript && Less
webpack 集成 Typescript && Less TypeScript是JavaScript的一个类型化的超集,可以编译成纯JavaScript,在本指南中,我们将学习如何将 ...
- Oracle 拼音码函数
拼音码 select comm.fun_spellcode('数据库') from dual 结果 : SJK 函数 CREATE OR REPLACE FUNCTION COMM.FUN_SPELL ...
- MATLAB中图像处理的函数
表1 图像显示 函数名 功能说明 函数名 功能说明 colorbar 颜色条显示 montage 按矩形剪辑方式显示多帧图像 getimage 从坐标系中获取图像数据 immovie 从多帧索引图像中 ...
- vue 学习六 在组件上使用v-model
其实这个部分应该是属于component,为什么把这玩意单独拿出来呢,原因是它这个东西比较涉及到了vue的事件,以及v-model指令的使用,还是比较综合的.所以就拿出来啦 父组件 <templ ...
- list集合获取相同以及不同的对象
List<StyleMenuModule> list1 = new ArrayList<>(); StyleMenuModule s1 = new StyleMenuModul ...
- Array Beauty
Array Beauty 给出一个长度为n的序列\(\{a_i\}\),定义一个序列的权值为其中元素两两之差的绝对值的最小值,询问\(\{a_i\}\)长度为K的子序列的权值之和\(\% 998244 ...
- vue 使用Animate.css库
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 历史上最详细的SpringCloud搭建微服务的过程。（包括注册中心，服务提供者和服务消费者）
首先搭建注册中心,创建一个springboot的maven工程. 工程创建完成之后,先在资源文件中的application.properties中写配置文件. server.port= spring. ...
- jquery实现表格复选框---多行选择问题(php变量)
1.html多选框标签行 表头的多选框,用于全选,取消全选 <th><input id='allSelected' type="checkbox">< ...
- leetcood学习笔记-35-二分法
题目: 第一次提交; class Solution: def searchInsert(self, nums: List[int], target: int) -> int: for i in ...