Vue品牌管理案例

最新推荐文章于 2023-06-07 11:32:44 发布
最新推荐文章于 2023-06-07 11:32:44 发布
阅读量81 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llj1028/article/details/128475705
版权

运用了很多方法，学习了增删改查的实现

<!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>品牌管理</title>
    <script src="../vue-2.4.0.js"></script>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="../day02/bootstrap/css/bootstrap.min.css">
    <script src="../day02/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        品牌管理
                    </h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form">
                        <div class="form-group">
                            <label class="" for="name">ID</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称" v-model="id">
                        </div>
                        <div class="form-group">
                            <label class="" for="name">Name</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称" v-model="carName">
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary" @click="add">添加</button>
                            <label class="" for="name">搜索</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称" v-model="searchObj">
                        </div>
                    </form>
                </div>

                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Time</th>
                            <th>delete------set</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in upObj()" :key="item.id">
                            <td>{{item.id}}</td>
                            <td>{{item.carName}}</td>
                            <td>{{item.carTime | setTime('YYYY/MM/DD/hh/mm/ss')}}</td>
                            <td>
                                <!-- 模态框 -->
                                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal"
                                    @click="delCar(item)">删除</button>
                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                    aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-hidden="true">&times;</button>
                                            </div>
                                            <div class="modal-body">是否删除</div>
                                            <div class="modal-footer">
                                                <!-- ****************是否删除按钮 -->
                                                <button type="button" class="btn btn-primary" data-dismiss="modal"
                                                    @click="del()">是</button>
                                                <button type="button" class="btn btn-default"
                                                    data-dismiss="modal">否</button>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal -->
                                </div>
                                <button type="button" class="btn btn-primary " data-toggle="modal"
                                    data-target="#myModal1" @click="setCg(item)">设置</button>
                                <!-- 模态框（Modal） -->
                                <div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
                                    aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-hidden="true">&times;</button>
                                            </div>
                                            <div class="modal-body">是否更改</div>
                                            <input type="text" v-model="value">
                                            <div class="modal-footer">
                                                <!-- ****************是否删除按钮 -->
                                                <button type="button" class="btn btn-primary " data-dismiss="modal"
                                                    @click="setCarName()">是</button>
                                                <button type="button" class="btn btn-default"
                                                    data-dismiss="modal">否</button>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal -->
                                </div>
                            </td>

                        </tr>
                    </tbody>
                </table>


            </div>
        </div>
    </div>
    </div>
</body>
<script>
    Vue.filter('setTime', function (data, format) {
        let y = data.getFullYear()
        let m = (data.getMonth() + 1).toString().padStart(2, '0')
        let d = data.getDate().toString().padStart(2, '0')
        let h = data.getHours().toString().padStart(2, '0')
        let m1 = data.getMinutes().toString().padStart(2, '0')
        let s = data.getSeconds().toString().padStart(2, '0')
        console.log(y, m, d, h, m1, s);
        return format.replace('YYYY', y).replace('MM', m).replace('DD', d).replace('hh', h).replace('mm', m1).replace('ss', s)
    })
    let vm = new Vue({
        el: '#app',
        data: {
            id: this.id,
            carName: this.carName,
            carTime: new Date(),
            // 搜索框
            searchObj: '',
            // 删除元素索引
            item: '',
            // 修改数据索引
            setItem:'',
            // input框
            value:'',
            list: [
                {
                    id: 1,
                    carName: '宝马',
                    carTime: new Date(),
                },
                {
                    id: 2,
                    carName: '奔驰',
                    carTime: new Date(),
                },
            ]
        },
        methods: {
            // 添加
            add() {
                let obj = {
                    id: this.id,
                    carName: this.carName,
                    carTime: new Date(),
                }
                if (this.list.some((item, index) => {
                    return item.id == obj.id
                })) {
                    alert('id重复')
                } else {
                    this.list.push(obj)
                }
                this.id = ''
                this.carName = ''
            },
            // 删除前存索引
            delCar(item) {

                this.item = this.list.indexOf(item)
                // console.log(this.item);
                // this.list.splice(this.list.indexOf(item), 1)
            },
            // 通过splice截取删除
            del() {
                // console.log(this.item);
                this.list.splice(this.item, 1)
            },
            // 搜索
            upObj() {
                return this.list.filter((item) => {
                    return item.carName.includes(this.searchObj)
                })
            },
            // 点击设置存索引
            setCg(item){
                // console.log(this.value);
                // console.log(this.list.indexOf(item));
                this.setItem=this.list.indexOf(item)
            },
            // 修改数据
            setCarName(){
                // console.log(this.setItem);
                this.list[this.setItem].carName = this.value
                // this.list[item].carName = this.value
            }
        },
    })
</script>
</html>
土豆and地瓜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Springboot+OSS+VUE素材管理案例
09-18
这个项目主要是以OSS图片上传（Web直传方式）实现素材管理主要功能以OSS图片上传及保存在服务器中、分组查询、类别查询、文件名称查询、文件地址查询、OSS图片删除及删除数据库的数据、分组增删改。
Vue案例（Day02）——品牌管理
最新发布
Yyan7777的博客
03-03 520
1. 💡列表渲染指令（v-for），用来辅助开发者基于一个数组来循环渲染一个列表结构；:class="{ 类名1: 布尔值, 类名2: 布尔值 }"。<button v-on:事件名="处理函数(实参)">按钮。📝需求2: 注意资产超过100的, 都用红色字体标记出来。2.💡 v-bind对样式控制的增强-操作class；🪧双向绑定指令（v-model="变量"）🧾需求3: 点击删除的a标签, 删除数据。📝需求1: 把默认数据显示到表格上。📣需求5: 实现底部添加资产的功能。🧾需求4: 完成总价和均价。
vue案例：品牌管理
Henry_ID的博客
07-11 290
案例-品牌管理(铺) 目标: 数据铺设 需求1: 把默认数据显示到表格上 需求2: 注意资产超过100的, 都用红色字体标记出来 细节: ​ ① 先铺设静态页面 — 去.md文档里, 复制数据和标签模板 ​ ② 此案例使用bootstrap, 需要下载, 并导入到工程main.js中 ​ ③ 用v-for配合默认数据, 把数据默认铺设到表格上显示 ​ ④ 直接在标签上, 大于100价格, 动态设置red类名 图示: 因为案例使用了bootstrap, 工程化开发, 模块化用npm/yarn下载引
vue--实现品牌管理案例
小白小白从不日别的博客
12-07 1114
0.前提条件 该案例用到了 bootstrap 因此需要先通过 npm install bootstrap@4.6.0 安装 并且在 mian.js 里引入：import 'bootstrap/dist/css/bootstrap.css' 格式化时间需要用到 moment ，因此需要先 npm install moment@2.29.1 --save ，再引入：import moment from 'moment' 1. 品牌数据增加, 功能实现 1.1需求： 实现表单数据新增进表格功能.
vue实现 品牌管理案例
mgaga的博客
11-06 179
品牌管理案例
vue3-实战-06-管理后台-品牌管理模块开发
ycmy2017的博客
06-07 658
商品品牌管理-列表-新增-修改-删除-表单校验
vue-router案例.zip
01-25
基于vueRouter的后台管理功能
vue 指令和过滤器的基本使用(品牌管理案例)
01-21
过滤器的基本使用 定义一个过滤器 <p>{{ msg | msgFormat('疯狂+1', '123') | test }} // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat Vue.filter('msgFormat', function (msg, arg, ... Vue.filter('test',
案例：后台管理系统（VUE路由案例）素材.zip
05-08
案例：后台管理系统（VUE路由案例）素材,有需要的请自行下载拿去练习，案例答案参考VUE专栏的后台管理系统案例，不懂的可以私聊博主交流哦!
基于Vue实现图书管理功能
08-29
主要为大家详细介绍了基于Vue实现图书管理功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用vue实现品牌管理
weixin_71104826的博客
12-27 156
学习vue第二天 实现了品牌管理
Vue案例-品牌管理(铺)
Yous的博客
08-10 451
先引入vue.js，moment.js和bootstrap。
vue的简单使用4-品牌管理小案例
星月昭铭的博客
05-05 315
前面已经学习了Vue的一些基础，现在开始做个小的案例来巩固巩固 本案例是一个简单的品牌管理系统（html和css就不多说了 主要说跟Vue） 效果图： 功能介绍： id和品牌两个输入框分别用来输入id和品牌名称， 添加按钮，当单击添加按钮时，会将说输入的信息添加到下面的列表中， 搜索,通过搜索关键字，将品牌名称中含有关键字的信息在列表中显示 列表区，用于显示数据 添加时间，添加品牌的时间，利用...
Vue案例——品牌管理
LY
07-27 674
完成功能：显示品牌列表、添加品牌、删除品牌、搜索品牌 引用bootstrap实现样式 涉及知识点：v-for、v-model、过滤器、字符串的padStart方法、按键修饰符、文本框捕获焦点 添加品牌 首先，将Vue实例中的data的list的值循环显示（v-for）在页面上，绑定key来唯一标识； 点击添加按钮时，绑定添加事件，将id和name的值创建一个对象加入到list中，之后将id和n...
vue的品牌管理案例
jiucha0209的博客
03-14 328
vue的品牌管理案例 Vue 品牌管理案例 <div id="app"> <label> <span>id:</span> <input type="text" v-model="id" /> </label> <label> <span&...
Vue小项目之品牌管理案例
qq_124917348的博客
06-23 352
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js测试</title> <script src="lib/vue-2.4.0.js"></script> <lin...
Vue 品牌管理
sinat_38832964的博客
05-29 231
文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>品牌管理</title> <link rel="stylesheet" href="css/bootstrap.min.css"> &lt...
springCloud+Vue改造品优购第二章--------品牌管理分页实现
weiqiang2的博客
08-13 506
从mapper到服务发布 TbBrandMapper BrandService BrandServiceImpl 发布服务 BrandController 服务测试 服务调用 前端 分页实现 从mapper到服务发布 TbBrandMapper package com.pyg.mapper; import java.util.List; import org.a...
vue——品牌管理案例
weixin_45998300的博客
03-18 710
1.数据铺设 1. 下载bootstrap：yarn add bootstrap 2.在main.js引入bootstrap：import "bootstrap/dist/css/bootstrap.css" 3.html+css 4.list数据铺设表格 <tbody> <tr v-for="obj in list" :key="obj.id"> <td>{{ obj.id }}</td>..
后台管理案例(vue3路由案例)
07-29
后台管理案例是指基于Vue3路由的一种设计模式，用于构建后台管理系统的一种解决方案。Vue3是一款流行的JavaScript框架，具有响应式的数据绑定和组件化开发的特点，非常适用于构建复杂的单页面应用程序。 在后台管理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值