VUE写一个简单的增改删列表
VUE做一个简单增改删表格最近在学VUE的过程中需要做一个简单的增改删表格，通过表格练习能更加直观深入了解VUE的使用方法，便于我们学习，下面是效果图：下面是代码：//css部分*{margin: 0;padding: 0;}.form{margin: 0 auto;width: 1200px;height: 390px;position: relative;...
·
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
0- 0
已为社区贡献2条内容
所有评论(0)