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. matplotlib TransformWrapper

    2020-04-09 23:26:53 --Edit by yangray TransformWrapper 是Transform的子类, 支持在运行中替掉一个变换(可以是不同类型, 但维度必须相同) ...

  2. Powershell基础---帮助系统

    帮助系统能带给我们什么? 1.快速找到命令,无需使用Bing或者Google 2.运行命令时候返回了错误信息,帮助系统可以告诉我们如何正确使用该命令 3.多个命令组合执行完成复杂的工作,帮助系统告诉我 ...

  3. vue 中 history 模式的配置和打包

    在使用 vue 进行项目开发中,默认的路由形式是 hash,表现形式就是 url 中始终带有 # 号,在后台管理类的项目中并不影响使用,但是在特殊场景,比如微信分享的H5链接中,微信会自动拼接参数,由 ...

  4. php开发中如何判断 是否微信访问

    在开发中遇到了这样一个需求,仅允许在微信中访问,所以就要对微信浏览器访问进行判断,本篇博文讲述如何判断是否是微信访问. /** * 判断是否微信访问 * @return bool */ functio ...

  5. 多线程高并发编程(5) -- CountDownLatch、CyclicBarrier源码分析

    一.CountDownLatch 1.概念 public CountDownLatch(int count) {//初始化 if (count < 0) throw new IllegalArg ...

  6. 基于canvas的画板

    最近重新在看Html5&CSS3的知识,看到canvas的时候,想到了以前在学校学计算机图形学时做过的画图实验,于是想,可以基于html5和css3来做一款画板,经过1天的努力,完成了画板的一 ...

  7. 小知识点:session的存放位置

    在php.ini里的配置session.save_path是注释掉的,那么Seesion保存的路径在不同类型操作系统保存在什么位置? Linux: /tmp 或 /var/lib/php/sessio ...

  8. jmeter并发时生成唯一变量

    vars.put("partnerOrderId","ZS"+Thread.currentThread().getId()+System.currentTime ...

  9. python+selenium实现网页自动化与爬虫技术

    举例某购物网站,通过selenium与python,实现主页上商品的搜索,并将信息爬虫保存至本地excel表内. 一.python环境与selenium环境安装 python在官网下载并安装并且设置环 ...

  10. mysql 使用记录

    修改 mysql 数据库密码 mysqladmin -u username -h host_name password -P <port> "new_password" ...