前端路线--Vue（day04）

最新推荐文章于 2024-10-08 17:48:41 发布

喝西瓜汁的兔叽Yan

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量129

点赞数

分类专栏：前端文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/Yan9_9/article/details/124746903

版权

前端专栏收录该内容

106 篇文章 5 订阅

订阅专栏

01-数组的变异方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <li v-for="(item,index) in arr" :key="index">{{item}}</li>
    </div>
</body>
<script>
    // 数组的变异方法--改变原数组的方法
    // push()  从数组的末尾添加任意多个元素，返回新数组的长度，原数组改变
    // pop()   从数组的末尾删除一个元素，返回被删除的元素，原数组改变
    // unshift() 从数组的头部添加任意多个元素，返回新数组的长度，原数组改变
    // shift() 从数组的头部删除一个元素，返回被删除的元素，原数组改变
    // sort() 排序，原数组改变
    // reverse() 数组反转，原数组改变
    // splice() //增加/修改/删除，原数组改变

    new Vue({
        el: "#app",
        data: {
            arr: [11, 22, 33, 44, 55, 66]
        },
        //编译完成后
        mounted() {
            console.log(this.arr);
            // 在vue.js中不能直接通过下标来修改数组的元素
            this.arr[0] = "你好";
            // console.log(this);

            // 修改的方式:
            //1.通过$.set(数组,索引,修改的值)
            this.$set(this.arr, 0, "hello");
            //2.通过splice()方法
            this.arr.splice(1, 1, "来了");
            //3.暴力修改：直接写一个新元素
            this.arr = ["你好", "来了", "暴力修改", 44, 55, 66];
        }
    })
</script>

</html>

02-修改对象数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{obj.username}}</h2>
        <h2>{{obj.age}}</h2>
        <h2>{{obj.sex}}</h2>
        <button @click="changeAge()">修改年龄</button>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            obj: {
                // obj中定义的数据，是响应式的数据，能通过this.obj.属性来修改
                // 动态添加的属性，不是响应式的数据，不能通过this.obj.属性来修改
                username: "二哥"
            }
        },
        //模板编译之后
        mounted() {
            // 修改username
            this.obj.username = "二哥你好"; //可以修改
        },
        methods: {
            changeAge() {
                this.obj.age = 18; //不加下面语句会添加不进去
                this.obj.username = "二哥二哥";

                //修改data中对象的方法 $set(对象，"属性","属性值")
                this.$set(this.obj, "sex", "男");
            }
        }
    })
</script>

</html>

03-后台案例(全选+排序)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <style>
        .table {
            margin: 20px 0px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 按钮 -->
        <div class="container">
            <div style="margin: 10px 0px;">
                <button class="btn btn-primary" @click="addUserFn">添加</button>
                <button class="btn btn-danger" @click="delAll()">批量删除</button>
            </div>
            <!-- 表格 -->
            <table class="table table-bordered text-center">
                <tr>
                    <td><input type="checkbox" v-model="checkAll" @click="selectAllFn()">全选</td>
                    <td v-for="(item,index) in thead" :key="item.id">{{item.title}}
                        <a href="" @click.prevent="sortAsc(index)">升序</a>
                        <a href="" @click.prevent="sortDesc(index)">降序</a>
                    </td>
                    <td>操作</td>
                </tr>
                <tr v-for="(userlist,index) in userlists" :key="index">
                    <td><input type="checkbox" @click="userSelect(index)" v-model="userlist.usercheck"></td>
                    <td>{{userlist.sNo}}</td>
                    <td>{{userlist.username}}</td>
                    <td>{{userlist.age}}</td>
                    <td>
                        <button class="btn btn-danger" @click="delUser(index)">删除</button>
                        <button class="btn btn-primary" @click="editUserFn(index)">编辑</button>
                    </td>
                </tr>
            </table>

            <!-- 添加用户 -->
            <fieldset v-show="addshow">
                <legend>添加用户</legend>
                <div class="form-group">
                    <p>
                        <label for="">学号</label>
                        <input type="text" class="form-control" v-model="addUser.sNo">
                    </p>
                </div>
                <div class="form-group">
                    <p>
                        <label for="">姓名</label>
                        <input type="text" class="form-control" v-model="addUser.username">
                    </p>
                </div>
                <div class="form-group">
                    <p>
                        <label for="">年龄</label>
                        <input type="text" class="form-control" v-model="addUser.age">
                    </p>
                </div>
                <div class="form-group">
                    <p>
                        <button class="btn btn-primary btn-block" @click="addUserOk()">添加</button>
                    </p>
                </div>
            </fieldset>

            <!-- 修改用户 -->
            <fieldset v-show="editshow">
                <legend>编辑用户</legend>
                <div class="form-group">
                    <p>
                        <label for="">学号</label>
                        <input type="text" class="form-control" v-model="editUser.sNo">
                    </p>
                </div>
                <div class="form-group">
                    <p>
                        <label for="">姓名</label>
                        <input type="text" class="form-control" v-model="editUser.username">
                    </p>
                </div>
                <div class="form-group">
                    <p>
                        <label for="">年龄</label>
                        <input type="text" class="form-control" v-model="editUser.age">
                    </p>
                </div>
                <div class="form-group">
                    <p>
                        <button class="btn btn-primary btn-block" @click="editUserOk()">修改</button>
                    </p>
                </div>
            </fieldset>
        </div>

    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            //全选按钮是否选中
            checkAll: false,
            // 添加用户的数据
            addUser: {
                id: new Date(),
                sNo: "",
                username: "",
                age: "",
                usercheck: false
            },
            // 编辑用户的数据
            editUser: {
                id: new Date(),
                sNo: "",
                username: "",
                age: "",
                usercheck: false
            },
            // 判断添加和修改面板是否显示
            addshow: false,
            editshow: false,
            // 表头数据
            thead: [
                { id: 01, title: "学号11", sort: "sNo" },
                { id: 02, title: "姓名", sort: "username" },
                { id: 03, title: "年龄", sort: "age" }

            ],
            // 用户数据
            userlists: [
                { id: 01, sNo: 1005, username: "兄弟", age: 18, usercheck: false },
                { id: 02, sNo: 1003, username: "姐妹", age: 30, usercheck: false },
                { id: 03, sNo: 1008, username: "好家伙", age: 25, usercheck: false }
            ]
        },
        methods: {
            // 添加按钮出现对应的面板
            addUserFn() {
                this.addshow = true;
                this.editshow = false;
            },
            // 修改按钮出现对应的面板
            editUserFn(index) {
                this.editshow = true;
                this.addshow = false;
                this.editUser = this.userlists[index]; //让修改面板出来时数据跟着加载出来
            },
            // 添加用户功能
            addUserOk() {
                // console.log(this.addUser);
                this.userlists.push(this.addUser);
                this.addshow = false;
                this.addUser = {
                    id: "",
                    sNo: "",
                    username: "",
                    age: ""
                }
            },
            // 编辑用户功能
            editUserOk() {
                this.editshow = false;
            },
            // 删除用户功能
            delUser(index) {
                this.userlists.splice(index, 1);
            },
            // 点击每一个用户前面的选择框,当全部选中时,可以让全选按钮选中
            userSelect(index) {
                console.log(index);
                this.userlists[index].usercheck = !this.userlists[index].usercheck; //修改userlists对象下面的usercheck的值(取反)
                this.checkAll = this.userlists.every((item) => { //判断userlists下面的usercheck是否选中，使得话让全选也选中
                    return item.usercheck == true; //数组的every()方法返回值是true或者false
                })
            },
            // 点击全选按钮,让所有的行都选中。
            selectAllFn() {
                this.checkAll = !this.checkAll;
                this.userlists.forEach((item) => { //修改userlists下的所有的usercheck,让其与全选保持一致
                    item.usercheck = this.checkAll;
                })
            },
            // 批量删除功能
            delAll() {
                for (let i = 0; i < this.userlists.length; i++) {
                    if (this.userlists[i].usercheck) { //遍历userlists，如果里面有复选框选中,就删除选中的内容
                        this.userlists.splice(i, 1);
                        i--;
                        console.log(i);
                    }
                }
                // forEach删除自身元素index不会被重置(for循环过程中支持修改索引（修改 i），但forEach做不到（底层控制index自增，我们无法左右它)
                // this.userlists.forEach((item, index) => {
                //     if (item.usercheck) { 
                //         this.userlists.splice(index, 1);
                //         index--;
                //         console.log(index);
                //     }
                // })

            },
            // 点击升序
            sortAsc(index) {
                // console.log(index);
                this.sortFn(index, "asc");
            },
            // 点击降序
            sortDesc(index) {
                // console.log(index);
                this.sortFn(index, "desc");
            },
            // 排序函数
            sortFn(index, sort) {
                var userSortFn = null; //定义一个变量用来存放排序(升序或者降序)函数 分离了数组sort(function(a,b){})
                console.log(this.thead[index].sort); //找到thead中的sort,sort代表在userlists中的键,即用来排序的键名
                var sortStr = this.thead[index].sort; //存放找到的thead中的sort
                switch (sort) {
                    case "asc": //如果是asc点击了升序
                        console.log("点击了升序按钮");
                        userSortFn = function(a, b) { //升序函数
                            return a[sortStr] > b[sortStr] ? 1 : -1;
                        }
                        break;
                    case "desc": //如果是desc点击了降序
                        console.log("点击了降序按钮");
                        userSortFn = function(a, b) { //降序函数
                            return a[sortStr] < b[sortStr] ? 1 : -1;
                        }
                        break;
                }
                // 利用数组的sort()来进行排序
                this.userlists.sort(userSortFn);
            }

        }
    })
</script>

</html>