Vue.js进阶【3】纯Vue实现单页面-列表增删改查
增删改查最能代表一个技术的完备性的，下面就展示Vue的增删改查，为了界面的美观实用了bootstrap仔细阅读下面的代码，即可领会其意思。不懂的标签和元素百度查一下一查一大堆。很快就可以理解了运行：直接右键HTML文件选择谷歌浏览器打开即可运行效果逻辑：全都是客户端自己提供数据，与服务端没有交互<html xmlns="http://www.w3.org/1999...
增删改查最能代表一个技术的完备性的，下面就展示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> <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>
<a href="#" v-on:click="Delete(row.Id)">删除</a>不好意思，不再提供百度云下载，需要联系我付费使用
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献5条内容
所有评论(0)