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. centos7 NAT链接配置(静态ip/修改网卡名为eth0)|1

    NAT的静态ip设置并且修改网卡名为eth0 1 cd /etc/sysconfig/network-scripts/ mv eno16777736  ifcfg-eth0 #修改名称 vi eth0 ...

  2. curl 交叉编译 支持http2和openssl

    touch run.sh chmod 755 run.sh mkdir build cd build ../run.sh run.sh #!/bin/bash #cd /build ../config ...

  3. spring singleton实例中的变量怎么保证线程安全

    pring中管理的bean实例默认情况下是单例的[sigleton类型],就还有prototype类型按其作用域来讲有sigleton,prototype,request,session,global ...

  4. IDEA默认KeyMap映射快捷键

    编辑 快捷键 描述 Ctrl + 空格 基础代码补全(任意类.方法.变量的名字) Ctrl + Shift + 空格 智能代码补全(过滤期望类型的方法和变量列表) Ctrl + Shift + 回车 ...

  5. Eureka源码分析

    源码流程图 先上图,不太清晰,抱歉 一.Eureka Server源码分析 从@EnableEurekaServer注解为入口,它是一个标记注解,点进去看 注解内容如下 /** * 激活Eureka服 ...

  6. OkHttp 优雅封装 OkHttps 之 回调线程魔变

    第一篇:OkHttp 优雅封装 HttpUtils 之 气海雪山初探 第二篇:OkHttp 优雅封装 HttpUtils 之 上传下载解密 简介 HttpUtils 从 v2.3.0 之后便重命名了, ...

  7. [WEB前置技能]HTTP协议

    HTTP概述 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送 ...

  8. ASP.NET Core 与 ASPOSE.Words for .NET

    Aspose.Total是Aspose公司旗下的最全的一套office文档管理方案,它提供的原生API可以对Word.Excel.PDF.Powerpoint.Outlook.CAD.图片.3D.ZI ...

  9. python正则表达式详解之Match类及其方法

    1.Match对象简介 match对象通常是由正则表达式对象的match 方法,search 方法等经过匹配之后而产生.可以直接当做bool值使用,如果匹配则相当于True, 如果不匹配,则返回Non ...

  10. css中的宽和高

    width width表示宽 height height表示高 max-width.min-width max-width表示最大宽度 min-width表示最小宽度 max-height.min-h ...