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 ...
随机推荐
- EXPLAIN 关键字可以 查看 sql执行 的详细过程
EXPLAIN SELECT n_did,n_count,n_total,d_last_exchange FROM player_con_record WHERE n_roleid=1 AND n_f ...
- fiddler composer post请求
必加部分:Content-Type: application/json
- 如何练习python?有这五个游戏,实操经验就已经够了
现在学习python的人越来越多了,但仅仅只是学习理论怎么够呢,如何练习python?已经是python初学者比较要学会的技巧了! 其实,最好的实操练习,就是玩游戏. 也许你不会信,但这五个小游戏足够 ...
- 关于gpu版本的tensorflow+anaconda+jupyter的一些安装问题(持续更新)
关于anaconda安装,虽然清华镜像站资源很丰富,但是不知道是网络还是运气的问题,用这个路径安装的时候总是出现文件丢失.具体表现可能是anaconda prompt 找不到,conda命令无效等问题 ...
- 五分钟!用python绘制漂亮的系统架构图
Diagrams 是一个基于Python绘制云系统架构的模块,它能够通过非常简单的描述就能可视化架构,并支持以下6个云产品的图标: AWS.Azure.GCP.K8s.阿里云 和 Oracle 云 基 ...
- 8行代码帮你python建立UDP通信
首先我们要搭建一个UDP通信,首先我们就要知道什么UDP: UDP用户数据报传输协议,它位于TCP/IP协议的传输层,是一种无连接的协议,它发送的报文不能确定是否完整地到达了另外一端.UDP广泛应用于 ...
- Spring IoC getBean 方法详解
前言 本篇文章主要介绍 Spring IoC 容器 getBean() 方法. 下图是一个大致的流程图: 正文 首先定义一个简单的 POJO,如下: public class User { priva ...
- js的中文英文排序
本例主要实现 中文汉字按拼音排序的方法和英文按照首字母排序的方法. //要排序的数据 let data = [ {chinese: '蔡司', english: 'Chase'}, {chinese: ...
- [转载]绕过CDN查找真实IP方法总结
前言 类似备忘录形式记录一下,这里结合了几篇绕过CDN寻找真实IP的文章,总结一下绕过CDN查找真实的IP的方法 介绍 CDN的全称是Content Delivery Network,即内容分发网络. ...
- [YII2] 3步发送邮件,有图有真相!
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABOQAAAIcCAYAAABW0HFSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjw ...