16. Vue 常用列表操作实例 - 增加列表数据

需求在前端开发中，对于列表的操作是最常见的，例如：增加列表数据、删除列表数据、查询列表的关键字等等。本篇章主要构建页面内容，以及增加列表数据。构建列表示例页面使用Bootstrap 4简单写一个列表以及相关查询条件。<!DOCTYPE html><html lang="en"><head><meta charset=...

海洋的渔夫

3810人浏览 · 2020-03-08 07:34:54

海洋的渔夫 · 2020-03-08 07:34:54 发布

需求

在前端开发中，对于列表的操作是最常见的，例如：增加列表数据、删除列表数据、查询列表的关键字等等。

本篇章主要构建页面内容，以及增加列表数据。

构建列表示例页面

使用Bootstrap 4简单写一个列表以及相关查询条件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>
    <!--  2.导入bootstrap库  -->
    <link rel="stylesheet" type="text/css" href="lib/bootstrap4/bootstrap.min.css">
    <script type="text/javascript" src="lib/bootstrap4/popper.min.js"></script>
    <script type="text/javascript" src="lib/bootstrap4/bootstrap.min.js"></script>
</head>
<body>

    <div id="app">

        <div class="container">

            <!-- 搜素条件 start -->
            <div class="row mt-2">
                <!-- 输入查询条件id -->
                <div class="form-group row">
                    <label for="input_id" class="col-sm-2 col-form-label">ID</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="input_id" placeholder="ID">
                    </div>
                </div>

                <!-- 输入查询条件id -->
                <div class="form-group row ml-3">
                    <label for="input_name" class="col-sm-2 col-form-label">Name</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="input_name" placeholder="Name">
                    </div>
                </div>

                <!-- 查询按钮  -->
                <input type="button" value="查询" class="btn btn-primary ml-2 mb-3">

                <!-- 搜素关键字 -->
                <input type="text" class="form-control" id="input_keywords" placeholder="输入关键字">

            </div>
            <!-- 搜素条件 end -->

            <!-- table列表 start-->
            <div class="row">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Id</th>
                            <th scope="col">Name</th>
                            <th scope="col">Ctime</th>
                            <th scope="col">Operation</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>奔驰</td>
                        <td>2020-01-17 12:21:31</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>宝马</td>
                        <td>2020-01-16 12:21:31</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    <tr>
                        <th scope="row">1</th>
                        <td>丰田</td>
                        <td>2020-01-17 10:21:31</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!-- table列表 end-->

        </div>

    </div>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods:{}
        })
    </script>

</body>
</html>

浏览器显示如下：

使用 v-for 渲染列表数据

将列表中的数据写成一个list数组，然后使用 v-for 进行遍历。

定义数据list数组，下面使用 v-for 进行数据遍历，如下：

渲染数据后的页面如下：

好了，基本的列表页面已经构建好了。那么下面来实现增加数据的示例。

增加列表数据

使用 v-model 绑定 id、name的数据，并且设置一个click的绑定事件，将数据增加到list数组中。

浏览器执行效果如下：

添加数据 ID：4, Name: 千里马 的数据，并点击添加按钮，触发添加数据。

完整实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>
    <!--  2.导入bootstrap库  -->
    <link rel="stylesheet" type="text/css" href="lib/bootstrap4/bootstrap.min.css">
    <script type="text/javascript" src="lib/bootstrap4/popper.min.js"></script>
    <script type="text/javascript" src="lib/bootstrap4/bootstrap.min.js"></script>
</head>
<body>

    <div id="app">

        <div class="container">

            <!-- 搜素条件 start -->
            <div class="row mt-2">
                <!-- 输入添加数据的id -->
                <div class="form-group row">
                    <label for="input_id" class="col-sm-2 col-form-label">ID</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="input_id" placeholder="ID" v-model="id">
                    </div>
                </div>

                <!-- 输入添加数据的name -->
                <div class="form-group row ml-3">
                    <label for="input_name" class="col-sm-2 col-form-label">Name</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="input_name" placeholder="Name" v-model="name">
                    </div>
                </div>

                <!-- 添加按钮  -->
                <input type="button" value="添加" class="btn btn-primary ml-2 mb-3" @click="add">

                <!-- 搜素关键字 -->
                <input type="text" class="form-control" id="input_keywords" placeholder="输入关键字">

            </div>
            <!-- 搜素条件 end -->

            <!-- table列表 start-->
            <div class="row">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Id</th>
                            <th scope="col">Name</th>
                            <th scope="col">Ctime</th>
                            <th scope="col">Operation</th>
                        </tr>
                    </thead>
                    <tbody>

                        <!-- 使用v-for遍历数据，并且设置key保证组件唯一性  -->
                        <tr v-for="item in list" :key="item.id">
                            <th scope="row">{{ item.id }}</th>
                            <td>{{ item.name }}</td>
                            <td>{{ item.ctime }}</td>
                            <td><a href="#">删除</a></td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <!-- table列表 end-->

        </div>

    </div>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                // 设置列表的数据 list
                list: [
                    { id: 1, name: '奔驰', ctime: new Date() },
                    { id: 2, name: '宝马', ctime: new Date() },
                    { id: 3, name: '丰田', ctime: new Date() },
                ],
            },
            methods:{
                add(){
                    // 将数据加入list数组
                    this.list.push({ id: this.id, name: this.name, ctime: new Date() });
                }
            }
        })
    </script>

</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^