vue 提交添加内容,点击删除内容

1 html

<input v-model="inputValue" />
<button @click="handClick">提交</button>
<ul>
<todo-item
v-for="(item,index) in list" :key="index"
:content="item"
:index='index'
@delete="handdelete"
></todo-item>
</ul>

2 js

export default {
data(){
return{
inputValue:'',
list:[]
}
},
methods:{
        //点击提交添加内容
handClick(){
this.list.push(this.inputValue)
this.inputValue=''
},
// @delete="handdelete" 监听子组件的方法 delete
handdelete(index){ //接收子组件传过来的index 进行删除
this.list.splice(index,1)
}
}
}

vue添加,删除内容的更多相关文章

  1. 百度地图API示例:使用vue添加删除覆盖物

    1.index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...

  2. Jquery基础添加删除内容

    直入主题,工作中比较常用的功能在input框内添加内容,不白话了,上代码! 布局: <div id="content"> <input type="te ...

  3. vue实现购物清单列表添加删除

    vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...

  4. vue简单案例_动态添加删除用户数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 脚本添加删除nginx配置中的内容

    [root@nodejs script]# more editnginx.sh #!/bin/bash # function back_check(){ # 备份配置和覆盖配置文件 cp -rf /e ...

  6. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS-DOM 综合练习-动态添加删除班级成绩表

    费了2个小时,才把原理弄懂,把问题逐个解决,当你发现你最后栽的那个点,是一个小石头拌的你,你起来是该哭还是该笑呢?只怪自己习武不精吧. 虽然问题都解决了,但是还有一个余留的问题就是鼠标经过input时 ...

  8. Android 动态添加删除ExpandableListView的item的例子

    这个例子可以学习到如下几点: 1.通过自定义Dialog(单独布局的xml文件进行弹出显示) 2.通过menu点击监听添加,删除view中的items 3.点击ExpandableListView中g ...

  9. MySQL创建/删除/清空表,添加/删除字段

    创建表: create table tablename (column_name column_type); create table table_name( id int not null auto ...

随机推荐

  1. 中阶 d04 xml 概念及使用

    idea新建xml文件https://www.jianshu.com/p/b8aeadae39b0 或https://blog.csdn.net/Hi_Boy_/article/details/804 ...

  2. Math.max.apply()用法

    apply的一些其他巧妙用法 Math.max.apply( null, [12,23,34,45] ); //细心的人可能已经察觉到,在我调用apply方法的时候, // 第一个参数是对象(this ...

  3. Java成长第三集--基础重点详细说明

    接上篇文章,继续阐述相关的重点基础知识,话不多说! 一.Java中equals()和“==”区别 1.对于8种基础数据类型,使用“=="比较值是否相等: 2.对于复合数据类型(类),使用eq ...

  4. AJ学IOS(12)UI之UITableView学习(上)LOL英雄联盟练习

    AJ分享,必须精品 先看效果图 源代码 NYViewController的代码 #import "NYViewController.h" #import "NYHero. ...

  5. windows批处理protoc生成C++代码

    1 首先需要生成protoc的可执行文件,具体可以参考  https://www.cnblogs.com/cnxkey/articles/10152646.html 2 将单个protoc文件生成.h ...

  6. eclipse集成 json editor plugin插件

    打开eclipse 找到: help--->install new software ——>add name:jsoneditor location:https://marketplace ...

  7. DataTable运用

    DataTable dataDis.AsEnumerable().Sum(bu => bu["QtyPlan"].ConvertInt32()); ndata.TDefSty ...

  8. IIS WebDAV安全配置

    本文为转载,原文地址:http://www.2cto.com/article/201307/228165.html IIS WebDAV安全配置 2013-07-16 12:13:00 作者:瞌睡龙收 ...

  9. css背景渐变色

    张鑫旭关于渐变色博客 菜鸟教程关于渐变色 .img-box{ background: #ec9259; /* 一些不支持背景渐变的浏览器 */ background: -webkit-linear-g ...

  10. VRRP概念、工作原理

    VRRP是一种路由容错协议,也可以叫做备份路由协议,可以把一个虚拟路由器的责任动态分配到局域网上的 VRRP 路由器中的一台. 控制虚拟路由器 IP 地址的 VRRP 路由器称为主路由器, 它负责转发 ...