Vuelayui实现简单的增删查改
Posted 张文琪2022
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vuelayui实现简单的增删查改相关的知识，希望对你有一定的参考价值。
今天公司里不是很忙，忙里偷闲学了会Vue，做了个小demo，使用Vue和layui框架。全部代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue+layui Demo</title>
<!-- 对应好js文件的路径哟 -->
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<form class="layui-form" action="">
<fieldset>
<legend>
添加新用户
</legend>
<div style="width: 30%">
<div class="layui-form-item">
<label class="layui-form-label">名字：</label>
<div class="layui-input-block">
<input type="text" placeholder="请输入名字" class="layui-input" v-model="newPerson.name">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">年龄：</label>
<div class="layui-input-block">
<input type="number" placeholder="请输入年龄" class="layui-input" v-model="newPerson.age">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别:</label>
<div class="layui-input-block">
<select v-model="newPerson.sex">
<option value=""></option>
<option value="Male">男</option>
<option value="Female">女</option>
</select>
</div>
</div>
</div>
<button @click="add" type="button" class="layui-btn layui-btn-normal">添加</button>
<button @click="find" type="button" class="layui-btn layui-btn-normal">查询</button>
<button @click="ref" type="button" class="layui-btn layui-btn-normal">重置</button>
</fieldset>
</form>
<table class="layui-table" style="text-align: center">
<thead>
<tr>
<th style="text-align: center">姓名</th>
<th style="text-align: center">年龄</th>
<th style="text-align: center">性别</th>
<th style="text-align: center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(person,index) in people">
<td> person.name </td>
<td> person.age </td>
<td>
<span v-if="person.sex=='Male'">男</span>
<span v-else-if="person.sex=='Female'">女</span>
<span v-else></span>
</td>
<td :class="'text-center'"><button @click="del(index)"
class="layui-btn layui-btn-sm layui-btn-danger">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var vm = new Vue(
el: '#app',
data:
newPerson:
name: '',
age: 0,
sex: 'Male'
,
datas: [
name: 'Z',
age: 22,
sex: 'Male'
,
name: 'W',
age: 22,
sex: 'Male'
,
name: 'Q',
age: 19,
sex: 'Female'
,
name: 'R',
age: 99,
sex: 'Male'
],
people: [],
onepeople:
,
created: function ()
this.people = this.datas.slice(0);//数组赋值 问题一
,
methods:
ref: function ()
//绑定数据问题
this.newPerson =
name: '',
age: 0,
sex: 'Male'
this.people.splice(0, this.people.length);
this.people = this.datas.slice(0);
,
add: function ()
if (this.newPerson.name == "" || this.newPerson.name == null)
alert("名字不能为空");
else if (this.newPerson.age == "" || this.newPerson.age == null)
alert("年龄不能为空");
else if (this.newPerson.sex == "" || this.newPerson.sex == null)
alert("性别不能为空");
else
this.people.push(this.newPerson);
this.newPerson =
name: '',
age: 0,
sex: 'Male'
//问题二
,
del: function (index)
this.people.splice(index, 1);//删除数组中的数据
,
find: function ()
for (let p of this.people)
if (p.name == this.newPerson.name)
this.onepeople = p;
break;
if (this.onepeople.name != null)
this.people.length = 0;
this.people.push(this.onepeople);
else
alert("无数据");
);
</script>
<script>
layui.use('form', function ()
var form = layui.form;
form.render();//表单渲染 这里是针对select 问题三
)
</script>
</html>
问题总结
1、数组间赋值，使用slice方法，避免地址复用
2、添加后改变输入框里的值，添加后的数据也会跟着变化，最直接的方法就是重新创建一个对象
3、layui表单中有几个标签必须要使用form模块渲染才能使用
以上是关于Vuelayui实现简单的增删查改的主要内容，如果未能解决你的问题，请参考以下文章
java--easyUI+struts+JSP实现简单的增删查改(增)
java--easyUI+struts+JSP实现简单的增删查改