練習vue（用戶管理）1

時間  2019-11-08
標籤 練習 vue 用戶 管理 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>練習vue（用戶管理）</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <script src="js/vue.js"></script>
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                let vm = new Vue({
                    el: '.container',
                    data: {
                        users: [
                            { name: 'tom', age: 24, email: 'tom@itany.com' },
                            { name: 'jack1', age: 23, email: 'jack@1232.com' },
                            { name: 'jack222', age: 23, email: 'jack@1232.com' }
                        ],
                        user: {},
                        nowIndex: -1
                    },
                    methods: {
                        adduser() {
                            this.users.push(this.user);
                            this.user = {};
                        },
                        deluser() {
                            if(this.nowIndex === -1) {
                                this.users = {}
                            } else {
                                this.users.splice(this.nowIndex, 1);
                            }

                        },
                        print(e) {
                            console.log(e);
                        }
                    }
                });
            }
        </script>
    </head>

    <body>
        <div class="container">
            <h3 class="text-center">添加用戶</h3>
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="name" class="control-label col-sm-2 col-sm-offset-2">姓名：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="name" v-model="user.name" placeholder="請輸入姓名" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="age" class="control-label col-sm-2 col-sm-offset-2">年齡：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="age" v-model="user.age" placeholder="請輸入年齡" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="email" class="control-label col-sm-2 col-sm-offset-2">郵箱：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="email" v-model="user.email" placeholder="請輸入郵箱" />
                    </div>
                </div>
                <div class="form-group text-center">
                    <input type="button" name="" id="" value="添 加" class="btn btn-primary" v-on:click="adduser()" />
                    <input type="reset" name="" id="" value="重 置" class="btn btn-primary" />
                </div>

            </form>
            <table class="table table-bordered table-hover">
                <caption class="h3 text-center">用戶列表</caption>
                <thead>
                    <tr>
                        <th>序號</th>

                        <td>姓名</td>

                        <th>年齡</th>

                        <td>郵箱</td>

                        <td>操做</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(user,index) in users">
                        <td>{{index+1}}</td>
                        <td>{{user.name}}</td>
                        <td>{{user.age}}</td>
                        <td>{{user.email}}</td>
                        <td class="text-right">
                            <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">刪除</button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5" class="text-right">
                            <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">刪除全部</button>
                            <button @click="print($event)">click me</button>
                        </td>
                    </tr>
                </tbody>

            </table>
            <div class="modal" id="del">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">
                                <span>
                                &times;
                                </span>
                            </button>
                            <h4 class="modal-title" v-show="nowIndex!==-1">確認刪除用戶：{{users[nowIndex]?users[nowIndex].name:''}}嗎？</h4>
                            <h4 class="modal-title" v-show="nowIndex===-1">確認刪除全部用戶嗎？</h4>
                        </div>
                        <div class="modal-body text-center">
                            <button class="btn btn-primary" data-dismiss="modal" v-on:click="deluser()">肯定</button>
                            <button class="btn btn-primary" data-dismiss="modal">取消</button>

                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </body>

</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程