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. Lua 5.3 -- SOL2.0 用户指南 【2】

    系列教程指南[1] 注意 在你学习了sol的基础知识之后,建议你如果认为某些东西可以运行,你应该尝试一下.它可能会运行! 以下所有代码均可在sol2教程示例中找到. 断言/先决条件 The imple ...

  2. python 性能测试

            python中使用的性能测试模块是memory_profiler , 我们使用它里面的profile这个装饰器即可测试出我们的代码的内存使用情况了.   如果没有安装 memory_p ...

  3. push和appendChild的区别

    概述:绑定事件(push和appendChild用法相似:但是一个是控制数组,一个是控制元素节点)用法:1.数组1的更改后的长度 = 数组1.push();//用来控制数组,在数组最后面插入项,返回数 ...

  4. AJ学IOS(20)UI之UIPickerView_点菜系统

    AJ分享,必须精品 先看效果图 ## UIPickerView控件 UIPickerView用处: 用来展示很多行(row) 很多列(component )的数据,多用于电子商务的点菜,城市选择等等. ...

  5. 通过神秘代码登录自己的QQ

    通过神秘代码登录自己的QQ 如图:是怎么做成的呢? 其实很明显,这个是QQ号码的16进制 所以网上搜索进制转换打开一个网页 输入自己的QQ号码,得到16进制的QQ号码 在QQ页面账号处先添加0x然后复 ...

  6. matlab操作Excel数据

    sheet是Excel的表格,xIRange是表格的列的范围 指定xlRange,例如使用语法'C1:C2',其中C1和C2是定义要读取的区百域的两个度相对的角. 例如,'D2:H4'表示工作表上的两 ...

  7. 基于Python的Webservice开发(四)-泛微OA的SOAP接口

    一.功能需求 泛微e-cology可以在流程中调用Webservice接口实现与其他系统的联动等复杂功能.但是目前泛微文档中仅提供了调用的方法,但是没有关于接口的相关开发信息. 本次案例是用Pytho ...

  8. frame/iframe多表单切换

    应用场景: 在Web应用中经常会遇到frame/iframe表单嵌套页面的应用,WebDriver只能在一个页面上对元素识别与定位,对于frame/iframe表单内嵌页面上的元素无法直接定位.这时就 ...

  9. 基于netty实现rpc框架-spring boot服务端

    demo地址 https://gitee.com/syher/grave-netty RPC介绍 首先了解一下RPC:远程过程调用.简单点说就是本地应用可以调用远程服务器的接口.那么通过什么方式调用远 ...

  10. Java 基础讲解

    Hello,老同学们,又见面啦,新同学们,你们好哦! 在看完本人的<数据结构与算法>专栏的博文的老同学,恭喜你们在学习本专栏时,你们将会发现好多知识点都讲解过,都易于理解,那么,没看过的同 ...