Vue.js进阶【3】纯Vue实现单页面-列表增删改查

最新推荐文章于 2024-05-16 22:00:22 发布

C++程序员Carea

最新推荐文章于 2024-05-16 22:00:22 发布

阅读量9.5k

点赞数 2

本文链接：https://blog.csdn.net/calmreason/article/details/82558975

版权

Vue.js进阶教程专栏收录该内容

46 篇文章 15 订阅

订阅专栏

增删改查最能代表一个技术的完备性的，下面就展示Vue的增删改查，为了界面的美观实用了bootstrap

仔细阅读下面的代码，即可领会其意思。不懂的标签和元素百度查一下一查一大堆。很快就可以理解了

运行：直接右键HTML文件选择谷歌浏览器打开即可

运行效果

逻辑：全都是客户端自己提供数据，与服务端没有交互

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>列表增删改查</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
    <style type="text/css">
        table thead tr th {
            text-align:center;
        }
    </style>
</head>
<body>
    <div style="padding:20px;" id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">用户管理</div>
            <table class="table table-bordered table-striped text-center">
                <thead>
                    <tr>
                        <template v-for= "headitem in head">
                            <th>{{headitem}}</th>
                        </template>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="row in rows ">
                        <tr>
                        	<td>{{row.Name}}</td>
                        	<td>{{row.Age}}</td>
                        	<td>{{row.School}}</td>
                        	<td>{{row.Remark}}</td>
                        	<td><a href="#" v-on:click="Edit(row)">编辑</a>&nbsp;&nbsp;<a href="#" v-on:click="Delete(row.Id)">删除</a>
                        	</td>
                        </tr>
                    </template>
                    <tr>
                        <td><input type="text" class="form-control" v-model="rowtemplate.Name" /></td>
                        <td><input type="text" class="form-control" v-model="rowtemplate.Age" /></td>
                        <td><select class="form-control" v-model="rowtemplate.School">
   　　　　　　　　　　　　　　　　 <option>中山小学</option>
    　　　　　　　　　　　　　　　　<option>复兴中学</option>
    　　　　　　　　　　　　　　　　<option>光明小学</option>
　　　　　　　　　　　　　　　　</select></td>
                        <td><input type="text" class="form-control" v-model="rowtemplate.Remark" /></td>
                        <td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="jquery-3.1.1.js"></script>
    <script src="vue.js"></script>
    <script type="text/javascript">
        //Model
        var data = {
            head:["用户名","年龄","毕业学校","备注","操作"],
            rows: [
            { Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' },
            { Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' },
            { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' },
            { Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' },
            { Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
            ],
            rowtemplate: { Id: 0, Name: '', Age: '', School: '', Remark: '' }
        };
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
            Save: function (event) {
                if (this.rowtemplate.Id == 0) {
                    //设置当前新增行的Id
                    this.rowtemplate.Id = this.rows.length + 1;
                    if (this.rowtemplate.Name === '') 
                    {
                        alert("Name can not empty!");
                    }
                    else
                    {
                        this.rows.push(this.rowtemplate);
                    }
                }
                
                //还原模板
                this.rowtemplate = { Id: 0, Name: '', Age: '', School: '', Remark: '' }
            },
            Delete: function (id) {
                //实际项目中参数操作肯定会涉及到id去后台删除，这里只是展示，先这么处理。
                for (var i=0;i<this.rows.length;i++){
                    if (this.rows[i].Id == id) {
                        this.rows.splice(i, 1);//从下标i开始删除1个元素：删除下标为i的元素
                        break;
                    }
                }
            },
            Edit: function (row) {
                this.rowtemplate = row;
            }
        }
    });
    </script>
</body>
</html>

列表：

<template v-for="row in rows ">
                        <tr>
                        	<td>{{row.Name}}</td>

1 数据rows就是Vue构造函数中data对象的一级子成员,Vue的构造函数使用了类似解构复制的方式创建了成员，使得可以在vue的作用域内直接使用this.rows this.rowtemplate的方式来操作，因为他们已经是Vue对象的直接成员变量了。

2 可以看出来列表是用v-for来实现的；包括表头也是用v-for来加载创建的

3 表格是用循环迭代tr/td来创建的；

4 每一行数据都可以通过vue来通过v-for中的row来获取；行数据其实存储在DOM对象的树成员之上和Vue中的data已经没有了关系；

编辑：

<td><input type="text" class="form-control" v-model="rowtemplate.Remark" /></td>

编辑使用了标准的input标签；

样式使用了Bootstrap表单的form-control；

数据绑定用了vue的双向绑定v-model="rowtemplate.Remark"，其中的rowtemplate是Vue对象的成员变量。

保存UI：

<td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td>

保存时在表格中防止了一个Bootstrap风格的按钮，按钮的点击使用了vue的v-on:click

保存vue：

保存函数只需要拿到vue的rowtemplate成员，将这个成员追加到自己的另一个数组数据成员rows中即可。因为这两个数据成员都在界面上双向绑定了界面元素。

保存的时候做了最简单的有效性检查：输入的名称不能为空值。

保存完了记得要重置rowtemplate成员变量，从而为下次保存做准备。如果不及时重置就会因为脏数据而影响下次保存。

删除：

使用了列表内部创建连接<a>的形式，并给链接增加点击相应事件来实现编辑和删除按钮，点击事件使用vue的v-on:click

<a href="#" v-on:click="Edit(row)">编辑</a>&nbsp;&nbsp;
<a href="#" v-on:click="Delete(row.Id)">删除</a>

不好意思，不再提供百度云下载，需要联系我付费使用

下一篇实现：Vue+Node+MongoDB+前后端分离实现登录界面

C++程序员Carea

关注

2
点赞
踩
33

收藏

觉得还不错? 一键收藏
打赏
4
评论
Vue.js进阶【3】纯Vue实现单页面-列表增删改查

增删改查最能代表一个技术的完备性的，下面就展示Vue的增删改查，为了界面的美观实用了bootstrap仔细阅读下面的代码，即可领会其意思。不懂的标签和元素百度查一下一查一大堆。很快就可以理解了运行：直接右键HTML文件选择谷歌浏览器打开即可运行效果逻辑：全都是客户端自己提供数据，与服务端没有交互<html xmlns="http://www.w3.org/1999...
复制链接

扫一扫