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

朱雀 2022-02-05 12:13 216阅读 0赞

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

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

效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]

功能介绍：

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

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

1.  首先写html
    
        <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>
2.  接在再写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>
3.  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将品牌信息删除
    
    **建议最好动手做一篇**
4.  全部代码：
    
        <!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>
    
    运行截图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]: /images/20220205/2d961cdcf29f4bb48c66541c10ea8b53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 1]: /images/20220205/635f7c94250648a883905e63bc4850d2.png