效果图:
以下代码实现增删改查
<!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">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<style>
tr,
th {
width: 200px;
height: 40px;
border: 1px solid black;
}
table {
border-collapse: collapse;
}
.zi {
margin-left: 100px;
}
</style>
<body>
<div id="box">
<div class="container">
<input type="text" v-model="names" placeholder="输入名字">   
<input type="text" v-model="ages" placeholder="输入年龄">   
<input type="text" v-model="sexs" placeholder="输入性别">   
<button @click="addlist">添加用户信息</button>
<hr>
<input type="text" placeholder="搜索名字" v-model="zhi">   
<button @click="sou()">搜索</button>
<button @click="one">第一页</button>
<button @click="two">第二页</button>