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. Java并发之显式锁和隐式锁的区别

    Java并发之显式锁和隐式锁的区别 在面试的过程中有可能会问到:在Java并发编程中,锁有两种实现:使用隐式锁和使用显示锁分别是什么?两者的区别是什么?所谓的显式锁和隐式锁的区别也就是说说Synchr ...

  2. SQL——语法基础篇(上)

    用数据库的方式思考SQL是如何执行的 虽然 SQL 是声明式语言,我们可以像使用英语一样使用它,不过在 RDBMS(关系型数据库管理系统)中,SQL 的实现方式还是有差别的.今天我们就从数据库的角度来 ...

  3. Python入门学习指导(VS Code配置向)

    代码编辑器或IDE 推荐Vs Code,Atom和Sublime(本文以Vs Code为例,Sublime对中文支持不是很好,时常弄好了Sublime的乱码,却在复制到其他编辑器时出了问题) Vs C ...

  4. 原生js俄罗斯方块

    效果图 方块定位原理通过16宫格定位坐标,把坐标存到数组中去 [ [[2,0],[2,1],[2,2],[1,2]],//L [[1,1],[2,1],[2,2],[2,3]], //左L [[2,0 ...

  5. 计时线程Runnable和Handler的结合

    利用Runnable和Handler,来创建计时线程 private double recodeTime = 0;// 用于计时 private double econdTime = 0;// 用于计 ...

  6. 【MyBatis深入剖析】应用分析与最佳实践

    ##### 文章目标1. 了解ORM框架的发展历史,了解MyBatis特性2. 掌握MyBatis编程式开发方法和核心对象3. 掌握MyBatis核心配置含义4. 掌握MyBatis的高级用法与扩展方 ...

  7. php+mysql数据库联合查询 left join 右侧数据重复问题

    情况:多表联合查询(三表及以上联合查询) 分析: A left join B left join C left join D 假如: 表B.C.D都与表A关联查询 A left join B 4条数据 ...

  8. NCTF2018_easy_audit->coding_breaks

    easy_audit 题目源码 <?php highlight_file(__FILE__); error_reporting(0); if($_REQUEST){ foreach ($_REQ ...

  9. Springboot:员工管理之修改员工(十(8))

    构建员工修改请求 com\springboot\controller\EmployeeController.java /*调转到员工修改页 携带员工信息 restful风格*/ @GetMapping ...

  10. webstorm tslint配置

    webstorm设置 settings >> TypeScript >> TSLint, 勾选 Enable ,选取 tslint包路径...npm\node_modules\ ...