<!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">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<title>Document</title>
</head>
<style>
th {
width: 150px;
height: 40px;
}
td {
text-align: center;
line-height: 50px;
}
#box {
width: 350px;
height: 350px;
margin: auto;
text-align: center;
}
#box2 {
width: 800px;
margin: auto;
}
</style>
<body>
<div id="app">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入查找内容" v-model="chazhaoVal" @keydown.13="chazhao()">
<span class="input-group-btn">
<button class="btn btn-default" type="button" @click="chazhao()" style="width: 150px;">Go!</button>
</span>
</div>
<br><br><br>
<div style="width: 800px; margin:auto">
<table class="table table-bordered">
<tr v-for="(item,index) in arr1">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.xingbie}}</td>
<td>{{item.shoujihao}}</td>
<td>
<button @click="gaibian(index)" type="button" class="btn btn-default">改编</button>
</td>
</tr>
</table>
</div>
<div id="box">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon3">姓名</span>
<input type="text" class="form-control" placeholder="请输入姓名" v-model="input1">
</div>
<br>
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon3">年龄</span>
<input type="text" class="form-control" placeholder="请输入年龄" v-model="input2">
</div>
<br>
<div style="font-size: 20px;">
<span class="input-group-addon" id="sizing-addon3">性别</span>
<input type="radio" name="xinbie" v-model="xingbie" value="男">男
<input type="radio" name="xinbie" v-model="xingbie" value="女">女<br><br>
</div>
<br>
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon3">手机号</span>
<input type="text" class="form-control" placeholder="请输入手机号" v-model="input3">
</div>
<br>
<button @click="fun()" type="button" class="btn btn-default">确认提交</button>
</div>
<br><br>
<div id="box2">
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in arr">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.xingbie}}</td>
<td>{{item.shoujihao}}</td>
<td>
<button @click="shanchu(index)" type="button" class="btn btn-default">删除</button>
<button @click="gaibian(index)" type="button" class="btn btn-default">改编</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
input1: "",
input2: "",
input3: "",
xingbie: "",
arr: [],
arr1: [],
chazhaoVal: "",
queren: "",
gai: 1,
},
methods: {
fun() {
if (this.gai == 1) {
if (!localStorage.getItem('obj')) {
localStorage.setItem('obj', JSON.stringify([]))
}
let data = JSON.parse(localStorage.getItem('obj'))
if (this.input1 != '' || this.input2 != '' || this.input3 != '' || this.xingbie != '') {
data.unshift(
{
name: this.input1,
age: this.input2,
xingbie: this.xingbie,
shoujihao: this.input3
}
)
}
this.arr.unshift({
name: this.input1,
age: this.input2,
xingbie: this.xingbie,
shoujihao: this.input3
})
localStorage.setItem('obj', JSON.stringify(data))
this.arr = data
this.input1 = "",
this.input2 = "",
this.input3 = "",
this.xingbie = ''
} else if (this.gai == 2) {
this.arr[this.queren].name = this.input1
this.arr[this.queren].age = this.input2
this.arr[this.queren].xingbie = this.xingbie
this.arr[this.queren].shoujihao = this.input3
localStorage.setItem('obj', JSON.stringify(this.arr))
this.input1 = "",
this.input2 = "",
this.input3 = "",
this.xingbie = ''
this.gai = 1
}
},
shanchu(index) {
if (confirm('是否要删除') == true) {
let data = JSON.parse(localStorage.getItem('obj'))
this.arr = data
this.arr.splice(index, 1)
localStorage.setItem('obj', JSON.stringify(this.arr))
console.log(confirm);
}
},
gaibian(i) {
let data = JSON.parse(localStorage.getItem('obj'))
this.arr = data
this.input1 = this.arr[i].name
this.input2 = this.arr[i].age
this.xingbie = this.arr[i].xingbie
this.input3 = this.arr[i].shoujihao
this.gai = 2
console.log(this.gai);
return this.queren = i
},
chazhao() {
this.arr1 = JSON.parse(localStorage.getItem('obj'))
this.arr1 = this.arr.filter(arr => arr.name.includes(this.chazhaoVal))
}
},
created() {
this.fun()
},
})
</script>
</html>
