vue.js实现简单用户系统的用户信息添加和删除
实现功能效果第一部分：Html+CSS<body><div id="app"><fieldset><legend>用户信息录入</legend><div><label for="">姓名：<input type="text" placeholder="请输
·
实现功能效果
第一部分：Html+CSS
<body>
<div id="app">
<fieldset>
<legend>用户信息录入</legend>
<div>
<label for="">姓名：
<input type="text" placeholder="请输入姓名" v-model='newInformation.userName'>
</label>
<br>
<label for="">年龄：
<input type="text" placeholder="请输入年龄" v-model='newInformation.age'>
</label>
<br>
<label for="">性别：
<select v-model="newInformation.selected">
<option>男</option>
<option>女</option>
</select>
</label>
<br>
<label for="">手机：
<input type="text" placeholder="请输入手机" v-model='newInformation.phone'>
</label>
<br>
<button @click='createUser()'>创建新用户</button>
</div>
</fieldset>
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for='(item,index) in userInformation' class="information">
<td>{{ item.userName }}</td>
<td>{{ item.selected }}</td>
<td>{{ item.age }}</td>
<td>{{ item.phone }}</td>
<td>
<button class="remove" @click=remove(index)>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</body><style>
#app {
width: 600px;
margin: 100px auto;
}
fieldset {
font-size: 18px;
color: #000;
font-weight: 600;
}
button {
background-color: #fff;
width: 85px;
line-height: 23px;
}
table {
width: 600px;
border: 1px solid rgb(156, 178, 187);
text-align: center;
margin-top: 10px;
}
thead {
background-color: rgba(56, 135, 224, 0.664);
color: white;
}
button {
cursor: pointer;
}
tbody tr:nth-of-type(odd) {
background-color: #93c1ec;
}
</style>第二部分：功能实现
<script>
const app = Vue.createApp({
data() {
return {
userInformation: [
{ userName: '用户1', selected: '男', age: '18', phone: '12345678911'},
{ userName: '用户2', selected: '女', age: '19', phone: '12345678912'},
{ userName: '用户3', selected: '男', age: '20', phone: '12345678913'},
],
newInformation:{
userName:'',
selected:'男',
age:'',
phone:''
}
}
},
methods: {
// 创建新用户
createUser() {
// 1、添加用户信息判空
const { userName,selected,age,phone } = this.newInformation
if(!userName || !selected || !age || !phone) {
alert('输入信息不能为空')
// 不执行后面代码
return
}
// 2、添加新用户
this.userInformation.unshift(this.newInformation)
// 3、清空输入框信息 保证添加完用户信息双向绑定的数据修改，下方表格数据不会随着修改
this.newInformation = {}
},
//删除功能
remove(index) {
// splice() 数组的删除方法 第一个参数是删除的位置 第二个参数是删除的个数
// 这边remove方法传值的index指的就是 userInformation 数组里面的索引值
this.userInformation.splice(index,1)
}
},
computed: {
}
}).mount('#app');
</script>
ps：代码整合 功能实现需要引入vue.js文件，下载地址在Vue.js官网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户信息录入</title>
<script src="./vue.js"></script>
<style>
#app {
width: 600px;
margin: 100px auto;
}
fieldset {
font-size: 18px;
color: #000;
font-weight: 600;
}
button {
background-color: #fff;
width: 85px;
line-height: 23px;
}
table {
width: 600px;
border: 1px solid rgb(156, 178, 187);
text-align: center;
margin-top: 10px;
}
thead {
background-color: rgba(56, 135, 224, 0.664);
color: white;
}
button {
cursor: pointer;
}
tbody tr:nth-of-type(odd) {
background-color: #93c1ec;
}
</style>
</head>
<body>
<div id="app">
<fieldset>
<legend>用户信息录入</legend>
<div>
<label for="">姓名：
<input type="text" placeholder="请输入姓名" v-model='newInformation.userName'>
</label>
<br>
<label for="">年龄：
<input type="text" placeholder="请输入年龄" v-model='newInformation.age'>
</label>
<br>
<label for="">性别：
<select v-model="newInformation.selected">
<option>男</option>
<option>女</option>
</select>
</label>
<br>
<label for="">手机：
<input type="text" placeholder="请输入手机" v-model='newInformation.phone'>
</label>
<br>
<button @click='createUser()'>创建新用户</button>
</div>
</fieldset>
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for='(item,index) in userInformation' class="information">
<td>{{ item.userName }}</td>
<td>{{ item.selected }}</td>
<td>{{ item.age }}</td>
<td>{{ item.phone }}</td>
<td>
<button class="remove" @click=remove(index)>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
userInformation: [
{ userName: '用户1', selected: '男', age: '18', phone: '12345678911'},
{ userName: '用户2', selected: '女', age: '19', phone: '12345678912'},
{ userName: '用户3', selected: '男', age: '20', phone: '12345678913'},
],
newInformation:{
userName:'',
selected:'男',
age:'',
phone:''
}
}
},
methods: {
// 创建新用户
createUser() {
// 1、添加用户信息判空
const { userName,selected,age,phone } = this.newInformation
if(!userName || !selected || !age || !phone) {
alert('输入信息不能为空')
// 不执行后面代码
return
}
// 2、添加新用户
this.userInformation.unshift(this.newInformation)
// 3、清空输入框信息 保证添加完用户信息双向绑定的数据修改，下方表格数据不会随着修改
this.newInformation = {}
},
// 删除
remove(index) {
// splice() 数组的删除方法 第一个参数是删除的位置 第二个参数是删除的个数
// 这边remove方法传值的index指的就是 userInformation 数组里面的索引值
this.userInformation.splice(index,1)
}
},
computed: {
}
}).mount('#app');
</script>
</html>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)