vue的简单使用4-品牌管理小案例

最新推荐文章于 2023-06-07 11:32:44 发布

星月昭铭

最新推荐文章于 2023-06-07 11:32:44 发布

阅读量348

点赞数 1

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/weixin_43373239/article/details/89853765

版权

Vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

前面已经学习了Vue的一些基础，现在开始做个小的案例来巩固巩固

本案例是一个简单的品牌管理系统（html和css就不多说了主要说跟Vue）

效果图：

在这里插入图片描述

功能介绍：

id和品牌两个输入框分别用来输入id和品牌名称，
添加按钮，当单击添加按钮时，会将说输入的信息添加到下面的列表中，
搜索,通过搜索关键字，将品牌名称中含有关键字的信息在列表中显示
列表区，用于显示数据
添加时间，添加品牌的时间，利用js的Date获取
删除操作，当点击删除时，会删除当前品牌信息

接下来就开始写吧(html和css代码建议看一遍后直接复制就行)

首先写html

<div id="head">
    <div class="top">添加品牌</div>
    <div class="add">
        <strong>Id:</strong>
        <!--使用v-model来进行双向绑定-->
        <input type="text" v-model="id">
        <strong>品牌:</strong>
        <input type="text" v-model="name">
        <button @click="add">添加</button>
        <strong>搜索名称关键字：</strong>
        <!--@keyUp会在键盘抬起的时候触发-->
        <input type="text" v-model="search" @keyUp="sea">
    </div>
    <div>
        <table class="show" cellpadding="0" cellspacing="0">
            <tr>
                <th>Id</th>
                <th>品牌名称</th>
                <th>添加时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="arr in car" v-show="arr.bool">
                <td>{{arr.id}}</td>
                <td>{{arr.name}}</td>
                <td>{{arr.addDate}}</td>
                <!--将当前的id传入函数中-->
                <td><a href="*" @click.prevent="remove(arr.id)">删除</a></td>
            </tr>
        </table>
    </div>
</div>

接在再写css样式，这里方便起见写成行内式

	<style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            background-color: #0062cc;
            color: white;
            padding: 7px;
        }

        .add {
            border: 1px solid #b1dfbb;
            border-radius: 3px;
            padding: 12px;
            margin-bottom: 6px;
        }

        .show {
            border: 1px solid #c6c8ca;
            width: 100%;
            text-align: left;
        }

        .show tr th:first-child {
            width: 15%;
        }

        .show tr th:nth-child(2) {
            width: 30%;
        }

        .show tr th:nth-child(3) {
            width: 50%;
        }

        .show tr th:last-child {
            width: 15%;
        }

        .show tr td, .show tr th {
            margin: 5px;
            border: 1px solid #c6c8ca;
            padding: 3px;
        }
    </style>

vue代码：

let vue1 = new Vue({
        el: '#head',
        //search用于搜索使用，用于获取搜索框中的值
        data: {
            id: null,
            name: null,
            search: null,
            car: []
        },
        methods: {
            add: function () {
                if (this.id === null) {
                    alert("id不能为空");
                } else if (this.name === null) {
                    alert("品牌不能为空");
                } else {
                    let data = new Date();
                    //下面分别是年 月 日 时 分 秒  注意月份是从0开始的，所以需要加1
                    let year = data.getFullYear().toString();
                    //如果月 日 时 分 秒小于10的话就在前面添加占位符0，
                    let month = data.getMonth() < 10 ? (0 + data.getMonth().toString()) : data.getMonth().toString();
                    let day = data.getDate() < 10 ? (0 + data.getDate().toString()) : data.getDate().toString();
                    let hours = data.getHours() < 10 ? (0 + data.getHours().toString()) : data.getHours().toString();
                    let minutes = data.getMinutes() < 10 ? (0 + data.getMinutes().toString()) : data.getMinutes().toString();
                    let seconds = data.getSeconds() < 10 ? (0 + data.getSeconds().toString()) : data.getSeconds().toString();
                    //将时间组合起来，例如2019-05-05 06：16：35  concat是字符串连接的方法，当多个字符串连接的时候不推荐用'+'
                    let addDate = year.concat("-").concat(month).concat("-").concat(day).concat(" ").concat(hours).concat(":").concat(minutes).concat(":").concat(seconds);
                    let carObj = {id: this.id, name: this.name, addDate: addDate, bool: true};
                    this.car.push(carObj);
                    this.id = "";
                    this.name = "";
                }
            },
            sea: function () {
                this.car.findIndex((value) => {
                    //当搜索框为空时，都显示
                    if (this.search === "") {
                        value.bool = true;
                    }
                    //包含关键字的列表显示，不包含的则隐藏
                    if (value.name.includes(this.search)) {
                        value.bool = true;
                    } else {
                        value.bool = false;
                    }
                });
            },
            remove: function (id) {
                //这里使用的是闭包的方式  如果使用function函数的方式需要将this.car改为_this.car  _this为此函数体外对this的引用
                //some方法会依次执行数组的每个元素，找出符合条件的元素然后返回true，否者返回false     也可以使用findIndex方法
                //value代表当前元素，本例中就是数组中的对象， index为下标（索引），如果找到了则index将会有值，通过splice方法从index处开始删除元素，删除1个。
                this.car.some((value, index) => {
                    //如果传入的id找到了
                    if (value.id === id) {
                        this.car.splice(index, 1);
                        return true;
                    }
                });
            }
        }
    });

data中定义一个数组car，用来存放品牌信息，格式是{id,品牌名,添加时间,是否显示（搜索时候用）}
data中的search用来获取搜索框中的值
methods中共有三个函数
- add()-添加功能：当单击添加按钮时，执行此函数，进行非空判断后获取时间，时间的格式时年-月-日时:分:秒，然后调用push()方法将此品牌对象添加到car数组中,再清空id和品牌名输入框
- sea()-搜索功能：通过搜索关键字获取列表信息，使用数组的findIndex方法来执行每一个数组元素，调用字符串的includes方法来查找品牌名中是否包含所获取的关键字，包含就将bool设为true,反之设为false
- remove(id)-删除功能：使用数组的some方法，类似上面的findIndex方法，通过传入的id来进行匹配，如果找到了id，怎可以获取到索引，然后通过数组的splice将品牌信息删除

建议最好动手做一篇

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="libs/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            background-color: #0062cc;
            color: white;
            padding: 7px;
        }

        .add {
            border: 1px solid #b1dfbb;
            border-radius: 3px;
            padding: 12px;
            margin-bottom: 6px;
        }

        .show {
            border: 1px solid #c6c8ca;
            width: 100%;
            text-align: left;
        }

        .show tr th:first-child {
            width: 15%;
        }

        .show tr th:nth-child(2) {
            width: 30%;
        }

        .show tr th:nth-child(3) {
            width: 50%;
        }

        .show tr th:last-child {
            width: 15%;
        }

        .show tr td, .show tr th {
            margin: 5px;
            border: 1px solid #c6c8ca;
            padding: 3px;
        }
    </style>
</head>
<body>
<div id="head">
    <div class="top">添加品牌</div>
    <div class="add">
        <strong>Id:</strong>
        <input type="text" v-model="id">
        <strong>品牌:</strong>
        <input type="text" v-model="name">
        <button @click="add">添加</button>
        <strong>搜索名称关键字：</strong>
        <input type="text" v-model="search" @keyUp="sea">
    </div>
    <div>
        <table class="show" cellpadding="0" cellspacing="0">
            <tr>
                <th>Id</th>
                <th>品牌名称</th>
                <th>添加时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="arr in car" v-show="arr.bool">
                <td>{{arr.id}}</td>
                <td>{{arr.name}}</td>
                <td>{{arr.addDate}}</td>
                <td><a href="*" @click.prevent="remove(arr.id)">删除</a></td>
            </tr>
        </table>
    </div>
</div>
<script>
    let vue1 = new Vue({
        el: '#head',
        //search用于搜索使用，用于获取搜索框中的值
        data: {
            id: null,
            name: null,
            search: null,
            car: []
        },
        methods: {
            add: function () {
                if (this.id === null) {
                    alert("id不能为空");
                } else if (this.name === null) {
                    alert("品牌不能为空");
                } else {
                    let data = new Date();
                    //下面分别是年 月 日 时 分 秒  注意月份是从0开始的，所以需要加1
                    let year = data.getFullYear().toString();
                    //如果月 日 时 分 秒小于10的话就在前面添加占位符0，
                    let month = data.getMonth() < 10 ? (0 + data.getMonth().toString()) : data.getMonth().toString();
                    let day = data.getDate() < 10 ? (0 + data.getDate().toString()) : data.getDate().toString();
                    let hours = data.getHours() < 10 ? (0 + data.getHours().toString()) : data.getHours().toString();
                    let minutes = data.getMinutes() < 10 ? (0 + data.getMinutes().toString()) : data.getMinutes().toString();
                    let seconds = data.getSeconds() < 10 ? (0 + data.getSeconds().toString()) : data.getSeconds().toString();
                    //将时间组合起来，例如2019-05-05 06：16：35  concat是字符串连接的方法，当多个字符串连接的时候不推荐用'+'
                    let addDate = year.concat("-").concat(month).concat("-").concat(day).concat(" ").concat(hours).concat(":").concat(minutes).concat(":").concat(seconds);
                    let carObj = {id: this.id, name: this.name, addDate: addDate, bool: true};
                    this.car.push(carObj);
                    this.id = "";
                    this.name = "";
                }
            },
            sea: function () {
                this.car.findIndex((value) => {
                    if (this.search === "") {
                        value.bool = true;
                    }
                    if (value.name.includes(this.search)) {
                        value.bool = true;
                    } else {
                        value.bool = false;
                    }
                });
            },
            remove: function (id) {
                //这里使用的是闭包的方式  如果使用function函数的方式需要将this.car改为_this.car  _this为此函数体外对this的引用
                //some方法会依次执行数组的每个元素，找出符合条件的元素然后返回true，否者返回false     也可以使用findIndex方法
                //value代表当前元素，本例中就是数组中的对象， index为下标（索引），如果找到了则index将会有值，通过splice方法从index处开始删除元素，删除1个。
                this.car.some((value, index) => {
                    //如果传入的id找到了
                    if (value.id === id) {
                        this.car.splice(index, 1);
                        return true;
                    }
                });
            }
        }
    });
</script>
</body>
</html>