vue 表格的增删改查

原创

已于 2022-08-24 20:12:06 修改 · 2.7k 阅读

48 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-07-05 20:38:58 首次发布

效果图：

以下代码实现增删改查

<!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="输入名字">&ensp;&ensp;&ensp;
            <input type="text" v-model="ages" placeholder="输入年龄">&ensp;&ensp;&ensp;
            <input type="text" v-model="sexs" placeholder="输入性别">&ensp;&ensp;&ensp;
            <button @click="addlist">添加用户信息</button>
            <hr>
            <input type="text" placeholder="搜索名字" v-model="zhi">&ensp;&ensp;&ensp;
            <button @click="sou()">搜索</button>
            <button @click="one">第一页</button>
            <button @click="two">第二页</button>