Vue、layui实现简单的增删查改-蒲公英云

Vue、layui实现简单的增删查改

今天公司里不是很忙，忙里偷闲学了会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>