vue添加,删除内容
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添加,删除内容的更多相关文章
- 百度地图API示例:使用vue添加删除覆盖物
1.index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...
- Jquery基础添加删除内容
直入主题,工作中比较常用的功能在input框内添加内容,不白话了,上代码! 布局: <div id="content"> <input type="te ...
- vue实现购物清单列表添加删除
vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...
- vue简单案例_动态添加删除用户数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 脚本添加删除nginx配置中的内容
[root@nodejs script]# more editnginx.sh #!/bin/bash # function back_check(){ # 备份配置和覆盖配置文件 cp -rf /e ...
- 用Javascript动态添加删除HTML元素实例 (转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS-DOM 综合练习-动态添加删除班级成绩表
费了2个小时,才把原理弄懂,把问题逐个解决,当你发现你最后栽的那个点,是一个小石头拌的你,你起来是该哭还是该笑呢?只怪自己习武不精吧. 虽然问题都解决了,但是还有一个余留的问题就是鼠标经过input时 ...
- Android 动态添加删除ExpandableListView的item的例子
这个例子可以学习到如下几点: 1.通过自定义Dialog(单独布局的xml文件进行弹出显示) 2.通过menu点击监听添加,删除view中的items 3.点击ExpandableListView中g ...
- MySQL创建/删除/清空表,添加/删除字段
创建表: create table tablename (column_name column_type); create table table_name( id int not null auto ...
随机推荐
- 中阶d03 JDBC 使用
1.首先在数据库中创建表 2.安装mysql驱动 java开发环境中导入jdbc连接mysql的jar包 mysql-connector-java-5.1.7-bin.jar 下载地址:https:/ ...
- Python设计模式(11)-状态模式
# coding=utf-8 # *状态模式:一个方法的判断逻辑太长,就不容易修改.方法过长,其本质就是,# * 就是本类在不同条件下的状态转移.状态模式,就是将这些判断分开到各个能# * 表示当前状 ...
- Altium Designer 3D
- RESTful API设计的点
RESTful API 前言 一直在使用RESTful API,但是好像概念还是很模糊的,总结下使用到的点 设计的规范 协议 API与用户的通信协议,总是使用HTTPs协议. 域名 应该尽量将API部 ...
- SpringBoot事件监听机制源码分析(上) SpringBoot源码(九)
SpringBoot中文注释项目Github地址: https://github.com/yuanmabiji/spring-boot-2.1.0.RELEASE 本篇接 SpringApplicat ...
- Thinking in Java,Fourth Edition(Java 编程思想,第四版)学习笔记(八)之Reusing Classes
The trick is to use the classes without soiling the existing code. 1. composition--simply create obj ...
- 通过String的不变性案例分析Java变量的可变性
阅读本文之前,请先看以下几个问题: 1.String变量是什么不变?final修饰变量时的不变性指的又是什么不变,是引用?还是内存地址?还是值? 2.java对象进行重赋值或者改变属性时在内存中是如何 ...
- commonJS、AMD和CMD之间的区别
JS中的模块规范(CommonJS,AMD,CMD),如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧, ...
- 掉了10根头发都无法解决的数学题,python帮你完美解答
本来这个周末过得开开心心,结果为了解一道数学题薅掉了一把头发...整整10根! 而且还是一道小学数学题!!! 到底是什么题呢?大家看看吧 这不就是一道逻辑题嘛! 先假如丁错,则甲乙丙对,此时最小的ab ...
- 在众多小说中,Python告诉你哪本小说好看
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 有趣的Python PS:如有需要Python学习资料的小伙伴可以 ...