VUE写一个简单的增改删列表

最新推荐文章于 2024-04-18 14:32:33 发布
最新推荐文章于 2024-04-18 14:32:33 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： VUE 文章标签： VUE写一个简单的增改删列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40756247/article/details/88293538
版权

VUE做一个简单增改删表格

最近在学VUE的过程中需要做一个简单的增改删表格，通过表格练习能更加直观深入了解VUE的使用方法，便于我们学习，下面是效果图：
在这里插入图片描述
下面是代码：

//css部分
*{
	margin: 0;
	padding: 0;
}
.form{
	margin: 0 auto;
	width: 1200px;
	height: 390px;
	position: relative;
}
.name{
	position: absolute;
	left: 250px;
	top: 70px;
	font-size: 20px;
}
.name>input{
	width: 325px;
	height: 55px;
}
.age{
	position: absolute;
	left: 250px;
	top: 140px;
	font-size: 20px;
}
.age>input{
	width: 325px;
	height: 55px;
}
.sex{
	position: absolute;
	left: 250px;
	top: 210px;
	font-size: 20px;
}
.sex>select{
	position: relative;
	left: -6px;
}
.chuangj{
	position: absolute;
	left: 308px;
	top: 270px;
	width: 90px;
	height: 52px;
	line-height: 52px;
	color: white;
	background-color: rgb(0,154,97);
	border-radius: 10%;
	font-size: 25px;
	text-align: center;
	cursor: pointer;
}
.biaoge{
	width: 1202px;
	margin: -1px auto;
}
.onetr{
	height: 50px;
	background-color: rgb(0,154,97);
	text-align: center;
	color: white;
	font-weight: 500;
}
.twotr{
	height: 75px;
    color: black;
	text-align: center;
}
.xiugai{
	width: 90px;
	height: 52px;
	padding: 8px 18px 8px 18px;
	color: white;
	background-color: rgb(0,154,97);
	border-radius: 10%;
	font-size: 25px;
	text-align: center;
}
.shanchu{
	width: 90px;
	height: 52px;
	color: white;
	background-color: rgb(0,154,97);
	border-radius: 10%;
	font-size: 25px;
	text-align: center;
}
.shadow{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: rgba(128,128,128,0.2);
	display: flex;
	justify-content: center;
	align-items: center;
}
.xgbox{
	width: 55%;
	height: 600px;
	background-color: white;
	position: fixed;
	left: 22.5%;
	top: 20%;
}
.xgbox>p{
	position: relative;
	font-size: 25px;
	top: 20px;
	left: 20px;
}
.xgname{
	position: relative;
	left: 150px;
	top: 70px;
	font-size: 20px;
}
.xgname>input{
	width: 730px;
	height: 70px;
}
.xgage{
	position: relative;
	left: 150px;
	top: 140px;
	font-size: 20px;
}
.xgage>input{
	width: 730px;
	height: 70px;
}
.xgsex{
	position: relative;
	left: 150px;
	top: 210px;
	font-size: 20px;
}
.xgsex>select{
	position: relative;
	left: -6px;
}
.xgbox>span{
	position: absolute;
	font-size: 30px;
	right: 2px;
	top: -10px;
	cursor: pointer;
}
.queding{
	width: 130px;
	height: 70px;
	color: skyblue;
	border: 1px solid skyblue;
	border-radius: 10%;
	font-size: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 150px;
	bottom: 50px;
	cursor: pointer;
}
.quixiao{
	position: absolute;
	left: 750px;
	bottom: 50px;
	width: 130px;
	height: 70px;
	color: skyblue;
	border: 1px solid skyblue;
	border-radius: 10%;
	font-size: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

//HTML部分
<html>
	<head>
		<meta charset="utf-8" />
		<title>jiedian</title>
		<link rel="stylesheet" type="text/css" href="css/jiedian.css" />
	</head>
	<body>
		<div id="box">
			<div class="shadow" v-show="seen">
				<div class="xgbox">
					<p>修改</p>
					<span v-on:click="close">x</span>
					<div class="xgname">
						姓名：<input type="text" id="xgname" placeholder="请输入姓名" v-model="chName"/>
					</div>
					<div class="xgage">
						年龄：<input type="text" id="xgage" placeholder="请输入年龄" v-model="chAge"/>
					</div>
					<div class="xgsex">
						<label>性别：</label>
						<select id="xgsex" style="width: 50px;height: 45px;font-size: 22px;"v-model="chselected">
							<option>男</option>
							<option>女</option>
						</select>
					</div>
					<div class="queding"v-on:click="affirm">
						确认
					</div>
					<div class="quixiao" v-on:click="close">
						取消
					</div>
				</div>
			</div>
			<div>
				<form>
					<fieldset class="form">
						<legend>创建类目</legend>
						<div class="name">
							姓名：<input type="text" id="name" placeholder="请输入姓名" v-model="userName" />
						</div>
						<div class="age">
							年龄：<input type="text" id="age" placeholder="请输入年龄" v-model="userAge" />
						</div>
						<div class="sex">
							<label>性别：</label>
							<select style="width: 50px;height: 45px;font-size: 22px;" v-model="selected">
								<option v-for="option in options" v-bind:value="option.gender">
									{{option.gender}}
								</option>
							</select>
						</div>
						<button type="button" class="chuangj" v-on:click="insertInfo">创建</button>
					</fieldset>
				</form>
			</div>
			<div class="biaoge">
				<table border="2px soild gray" style="border-collapse: collapse;">
					<tbody class="father">
						<tr class="onetr">
							<td width="220">姓名</td>
							<td width="220">年龄</td>
							<td width="220">性别</td>
							<td width="540">删除</td>
						</tr>
						<tr v-for="(person,index) in inArr" :class="trcla">
							<td>{{person.uname}}</td>
							<td>{{person.uage}}</td>
							<td>{{person.gender}}</td>
							<td>
								<button v-on:click="change(index)" :class="chacla">修改</button>
								<button v-on:click="deleteInfo(index)" :class="delcla">删除</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#box",
				data: {
					//样式,不多解释
					trcla: "twotr",
					delcla: "shanchu",
					chacla: "xiugai",
					//默认男,初始为空
					selected: '男',
					userName: '',
					userAge: '',
					//修改里面初始空,默认男
					chName:'',
					chAge:'',
					chselected:'男',
					//v-show初始false不可见
					seen:false,
					//性别选项
					options: [{
							gender: "男"
						},
						{
							gender: "女"
						}
					],
					inArr: []
				},
				//定义方法
				methods: {
					//创建的方法
					insertInfo() {
						var obj = {};
						obj.uname = this.userName;
						obj.uage = this.userAge;
						obj.gender = this.selected;
						this.inArr.push(obj);
						//创建完后将创建区清空
						this.userName="";
						this.userAge="";
						this.selected="男";
					},
					//关闭修改浮层
					close(){
						this.seen=false;
					},
					//显示修改浮层
					change(index) {
						//用变量存储需要修改的内容位置以便下面的修改
						changedata=this.inArr[index];
						this.seen=true;
						this.chName=changedata.uname;
						this.chAge=changedata.uage;
						this.chselected=changedata.gender;
					},
					//确定按钮,使用前面存储的修改内容位置直接改数组内容然后通过VUE渲染
					affirm(){
						this.seen=false;
						changedata.uname=this.chName;
						changedata.uage=this.chAge;
						changedata.gender=this.chselected;
					},
					//删除当前位置数组中的内容
					deleteInfo(index) {
						this.inArr.splice(index, 1);
					}
				}
			})
			
		</script>
	</body>
</html>

注：这里需要导入VUE.JS，可以去VUE官网下载。
通过增改删的练习集合VUE的入门指南相信能更快得让大家熟悉VUE。

音色丽敏
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
隔离Day10-Vue 一个简单的列表清单
joey_2018_的博客
04-29 702
一转眼距离隔离已经第10天了，还好咱们的工作可以远程办公。不至于干瞪眼。前几天学了些django的知识，不过就更新了两天，学了点基础东西，这两天在看VUE，跟着极客时间上的大神整一个简单的列表清单。 实现功能如下 : 1.上面的文本框输入文字，按回车，就会出现在下方列表中 2.打勾，就会显示删除的样式 3.点击清理，就会删除打勾的数据 4.列表中的勾全部选中，全选就会勾上，取消则全选的勾去掉 开发工具用的vs code vue开发思想 1.引入vue <script s
用Vue做一个简单的增删查
weixin_52031155的博客
11-24 745
因为我们要写一个增删查的一个功能，那么我们一定会用到点击事件。首先我们来了解一下点击事件： 点击事件的语法有4种方法： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> &
写一个vue列表页代码
weixin_42608299的博客
02-17 116
<p>Vue列表页代码：<template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template><scri...
Vue 入门编程：做一个简单的列表。并用组件传值。
qq_20446879的博客
08-21 536
准备：下载一个vue.js 下载地址（二选一）： 开发版本：https://cn.vuejs.org/js/vue.js 生产版本：https://cn.vuejs.org/js/vue.min.js 下面开始编码： <!DOCTYPE HTML > <html lang='en'> <head&g...
使用vue实现的品牌列表简单小例子
weixin_30588729的博客
01-30 293
直接贴代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
vue实现一个基础的虚拟列表
Wonder
06-24 3362
后端返回十万条数据，前端怎么处理？
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
08-28
从 Vue 基础开始创建一个简单的增删改查的实例代码 本文主要介绍了如何从 Vue 基础开始创建一个简单的增删改查的实例代码，包括安装 Vue-cli、创建webpack基础项目、安装 Element-UI 和 Axios 库、创建 Test/List....
vue增删改查的简单操作
08-29
Vue 增删改查的简单操作 Vue 是一个流行的前端框架，提供了很多强大的功能来帮助开发者快速构建应用程序。在这个资源中，我们将详细介绍 Vue 增删改查的简单操作，包括展示数据、增加和删除功能、修改功能等。 一...
vue.js简单添加和删除
weixin_33948416的博客
12-04 172
这只是个简单的添加和删除，没有连接后台数据的 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w...
Vue实现列表的增删改查
weixin_45389051的博客
03-06 2672
一.html <div id="app"> <from> <label>id: <input type="text" v-model="id"> </label> <label>name: <input type="text" v-m...
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做一个动态可添加列表效果
qq_44938644的博客
08-05 2056
用vue做一个动态可添加列表效果（持续更新中）
使用Vue单文件组件添加删除列表
guowenf的博客
04-24 947
Vue单文件组件实现列表操作单文件组件创建一个Vue项目1、安装vue和vue-cli2、安装webpack和weback-cli3、新建项目4、运行项目Vue的项目结构实现思路1、TopContent.vue2、TableRow.vue3、MainContent.vue4、将MainContent组件引入到App.vue中5、保存运行npm run dev即可 单文件组件 单文件组件（.vue）...
vue可编辑列表标签_vue实现商品列表的添加删除实例讲解
weixin_39604819的博客
01-15 502
我们首先来看下代码：ID： Name： 提交ID品牌名称添加时间操作{{item.id}}{{item.pp_name}}{{item.add_time | getTime()}}删除// var app = new Vue({el: '#app',data: {id : '',name : '',list : [{id : 1, pp_name : '安踏', add_time : new Da...
Vue开发实例（17）之实现用户列表
编程界明世隐的博客
05-25 5250
Vue开发实例（17）之实现用户列表 Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！ 导航 ✪  Vue开发实例目录总索引 ◄ 上一篇【16】创建标签页 ► 下一篇【18】用户列表的增删改
VUE-列表
最新发布
别追我我有止咳糖浆
04-18 474
如下例子。
Vue开发实例（十一）用户列表的实现与操作
Daniel
03-03 1017
用户列表的实现，表头自定义样式、增删改查、内滚动等操作，
Vue - 简单的列表展示实现
iotjin的专栏
04-20 2065
<template> <div class="Message"> <TabBar :title="title" :can-back="false"/> <div class="cell-bg"> <!-- <div v-for="item in dataArr" :key="item.id" v-on:click="onclick(item)">--> <div v-for="item i
用vue写一个简单的增删改操作
huihui_999的博客
01-07 162
用vue写一个简单的增删改操作
vue实现一个简单增删改查
04-24
然后，创建一个数据模型来存储我们要进行增删改查的数据。接下来，我们可以使用 Vue.js 的模板语法和 v-for 指令来展示数据列表，并且可以通过添加表单来实现数据的增加和修改。最后，我们可以使用 v-bind 和 v-on ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值