vue增加删除数据

最新推荐文章于 2024-05-16 02:26:50 发布
最新推荐文章于 2024-05-16 02:26:50 发布
阅读量2.5k 收藏 4
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43853424/article/details/88350884
版权

首先，放上结构

<style>
			*{
			  margin: 0;
			  padding: 0;
			  list-style: none;
			}
			fieldset{
				height: 330px;
				width: 800px;
				margin: 0 auto;
				border: 1px solid #009A61;
			}
			p{
				margin: 0 auto;
				width: 600px;
			}
			input{
				height: 40px;
			}
			select{
				height: 30px;
				width: 50px;
			}
			fieldset p:nth-of-type(1){
				margin-top: 40px;
			}
			fieldset p:nth-of-type(2){
				margin: 30px auto;
			}
			.est{
				margin-top: 20px;
				margin-left: 130px;
				width: 60px;
				height: 40px;
				background: #009A61;
				color: white;
				border: none;
			}
			table{
				width: 804px;
				margin: 0 auto;
				border-collapse: collapse;
			}
			thead tr:nth-of-type(1){
				text-align: center;
				height: 40px;
				color: white;
				background:  #009A61;
			}
			td{
				border: 1px solid #D3D3D3;
			}
			#box tr{
				height: 35px;
				text-align: center;
			}
			#box tr td:nth-of-type(4){
				justify-content: center;
			}
			.delet{
				margin-left: 5px;
				width: 40px;
				height: 30px;
				background:  #009A61;
				border: none;
				color: white;
			}
			.xiugai{
				width: 40px;
				height: 30px;
				background-color: #009A61;
				padding: 0;
				border-radius: 0;
				border: 0;
			}
			.xiugai:hover{
				background-color: #009A61;
			}
		</style>
	</head>
	<body>
		<div id="div">
			 <fieldset>
				<legend>创建类目</legend>
				<p>
					<label>名字</label>
					<input type="text" class="na" v-model="newArr.name">
				</p>
				<p>
					<label>年龄</label>
					<input type="text" class="age"v-model="newArr.age">
				</p>
				<p>
					<label>性别</label>
					<select class="gen" v-model="newArr.sex">
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</p>
				<button class="est" @click="cj">创建</button>
			</fieldset>
			<table>
				<thead>
					<tr>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>删除</td>
					</tr>
				</thead>
				<tbody id="box">
					<tr v-for="(a,index) in people">
						<td>{{a.name}}</td>
						<td>{{a.age}}</td>
						<td>{{a.sex}}</td>
						<td>
							<button class="delet" @click="Delete(index)">删除</button>
							<button  type="button" class="btn btn-primary xiugai" data-toggle="modal" data-target="#exampleModal" >修改</button>
						
						</td>
					</tr>
				</tbody>
			</table>
		</div>

在这里插入图片描述
vue

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:"#div",
				data:{
					people:[{
						name:'小明',
						age:10,
						sex:'男'
					},{
						name:'小红',
						age:12,
						sex:'女'
					}],
					newArr:{
						name:"",
						age:"",
						sex:"",
					},
				},
				methods:{
					cj(){
					   let obj={};
					   obj=JSON.stringify(this.newArr);
					   this.people.push(JSON.parse(obj));
					   this.newArr.name=''
					   this.newArr.age=''
					  
					},
					Delete(index){
						this.people.splice(index,1)
					},
					
					
				}
				
			})
		</script>

这样就可以实现数据的添加与删除了，主要还是数据的调用。

蔡大毛
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现简单的添加和删除
qq_59717525的博客
11-08 1504
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引.
vue实现添加数据和删除
webkaifa0126的博客
07-30 3050
{{list.value}}
vue + element-ui 动态增减表单的添加、删除和修改问题_element动态增减表单项
最新发布
2401_84617533的博客
05-16 724
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式。//将该行对应的数据赋值。
vue.js实现添加删除
weixin_30852367的博客
12-27 231
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书馆增加书</title> <script src="js/vue.js"></script> <style> ...
VUE-动态添加删除
EstherNi的博客
07-09 558
VUE-动态添加删除
vue 实现 添加 和 删除需求
FemaleHacker的博客
07-21 1268
文章目录vue 简易 实现 添加 和 删除 需求要求效果图思路代码 vue 简易 实现 添加 和 删除 需求 要求 文本框和添加按钮，点击添加按钮后，添加文本，并在下方显示，同时每个文本佩带一个 删除按钮，方便其进行删除 效果图 初始图： 添加 11111 元素： 选择删除 414141： 点击确定后： 思路 主要操作分为 获取文本，添加 及 删除 操作 获取文本：可以通过 文本框的 id 进行获取 添加： 点击 添加 按钮，然后获取到文本的 value 值，然后添加到 data 数组中即data
Vue实现动态创建和删除数据的方法
08-27
Vue 实现动态创建和删除数据的方法 本文将为大家分享一个使用 Vue 实现动态创建和删除数据的方法，该方法具有很好的参考价值，希望对大家有所帮助。 Vue 中的动态创建和删除数据 在 Vue 中，实现动态创建和删除...
vue2.0实现列表数据增加和删除
10-15
主要为大家详细介绍了vue2.0实现列表数据增加和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解vue添加删除元素的方法
08-27
vue添加删除元素的方法 Vue.js 是一个流行的前端框架，用于构建用户界面和单页应用程序。在 Vue 中，添加和删除元素是非常常见的操作。下面我们将详细介绍 Vue 中添加和删除元素的方法。 添加元素 在 Vue 中，...
Vue动态数据增加删除效果源码
10-14
在"Vue动态数据增加删除效果源码"这个项目中，我们将探讨如何利用Vue的核心特性来实现动态数据的增删功能，这通常涉及到Vue实例的生命周期、组件、数据绑定、事件处理以及计算属性等多个方面。 首先，Vue实例的数据...
Vue训练——数据删除和添加
weixin_52335574的博客
04-28 1275
Vue训练——数据删除和添加      使用splice和push进行数据的删除和添加。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./js/vue.js" type="text/javascript" charset="utf-8">
Vue 实现列表动态添加和删除的两种方法小结
12-29
下面将介绍两种方式实现动态添加和删除列表 1.不使用组件 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Vue 测试实例 - vue实现列表增加和删除</title> [removed][removed] </head> <body> <input v-model=newAddText placeholder=请输入要添加的内容 /> <button @click='addNew
vue-append:vue-append，类似于v-html指令，但可以调用javascript函数
05-25
附加值 vue-append，类似于v-html指令，但可以调用javascript函数 安装 npm install vue-append --save # or yarn add vue-append ES6模块 通过npm作为vue-append可用。 import VueAppend from 'vue-append' Vue . use ( VueAppend ) 普通JS var VueAppend = require ( 'vue-append' ) Vue . use ( VueAppend ) 直接包含 您也可以直接在[removed]标记中添加它。 它将自动安装自身，并添加一个全局VueAppend 。 事件 附加的 如果html append，脚本已下载且没有抛出错误，则将触发appended事件。 附加器 如果在添加html时抛出错误，则将触发a
vue 实现顶部tab栏菜单（顶部tab按钮）切换（添加删除nav数据，适配微前端应用，滑动动画，右键菜单弹窗）
baidu_33164415的博客
12-23 3215
要做顶部tab栏切换，还需要配合菜单。这里主要讲tab栏的实现方式。首先为了在样式效果上实现方便，这里决定使用element-ui的el-tabs标签来做。这样只需要改下样式，其他效果例如切换动画都能保存。当然，除了el-tabs自带的删除等事件，这里还需要添加右键事件，在右键事件里面有关闭全部和关闭其他两个事件选项示例中主应用和子应用均使用history路由模式。
Vue简单入门 实现添加删除实例
zyynb的博客
06-09 3290
Vue简单入门 实现添加删除实例 首先创建一个Vue实例 ，并引入vue <div id="app"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let zyy = new Vue({ el: "#app", data() {
Vue入门（3）：制作一个简易的增加删除查找数据的案例
tinglis的博客
06-01 568
Vue入门（3）：制作一个简易的增加删除查找数据的案例 我们都知道Vue很好用，那我们要怎么来用vue呢！ 在这里我们需要引进Vue和layui，具体请查看我前面的博客，并且我们还需要安装Vue.js devtools，我这边使用火狐浏览器，安装步骤如下： 1、点开右上角的菜单（三横） 2、点击附加组件 3、输入vue，点击Vue.js devtools， 4、点击添加到Firefox 这样就可以啦！ 这里我学做了一个简易的增加删除查找数据的案例，话不多说，直接上代码： <!DOCTYPE html&
vue删除按钮/数据双向绑定/添加数据/删除数据/let和var
weixin_47707952的博客
11-26 2109
#vue删除按钮/数据双向绑定/添加数据/删除数据 这是自己写项目时候的，可以参考一下 先上代码： 下面展示一些 <template>代码片。 // template <template> <div> <div class="harvest_box"> <ul class="harvest_ul clearfix"> <li v-for="(item,i) in information"
vue 动态添加删除行
qq_30272167的博客
05-18 308
vue动态添加行
Vue 列表对象删除数据操作
qq_33934427的博客
12-29 3426
Vue 列表对象删除数据操作 参考Vue 常用列表操作实例 - 删除列表数据 <div class="flex_column img_div"> <div class="flex_row" v-for="item in dialogForm.trainingPlanFileList" :key="item.fileName" > {{item.fileName}} <span class="point
vue批量删除表格数据
04-05
2. 接下来，在表格中添加复选框列，用于选中要删除的行数据，例如： ``` <el-table-column type="selection"></el-table-column> <el-table-column prop="id" label="ID"></el-table-column> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值