Vue指令综合案例——汽车品牌管理

已于 2023-04-02 12:45:20 修改
阅读量278 收藏 4
点赞数 1
分类专栏： vue html 文章标签： html 前端 css vue
于 2023-04-02 12:41:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CNSA183_20/article/details/129909386
版权
vue 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
html
2 篇文章 0 订阅
订阅专栏

品牌列表案例

1. 案例效果

 代码段


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <!-- 导入 bootstrap 的样式表 -->
    <!-- https://v4.bootcss.com/docs/components/forms/#switches -->
    <link rel="stylesheet" href="./lib/bootstrap.css"/>
    <style>
        :root {
            font-size: 13px;
        }

        body {
            padding: 8px;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 卡片区域 -->
    <div class="card">
        <h5 class="card-header">添加品牌</h5>
        <div class="card-body">
            <!-- 添加品牌的表单 -->
            <form class="form-inline" @submit.prevent>
                <div class="input-group mb-2 mr-sm-2">
                    <div class="input-group-prepend">
                        <div class="input-group-text">品牌名称</div>
                    </div>
                    <!-- 文本输入框 -->
                    <input type="text" class="form-control" v-model.trim="brandname" @keyup.esc="brandname=''"/>
                </div>

                <!-- 提交表单的按钮 -->
                <button type="submit" class="btn btn-primary mb-2" @click="addNewBrand">添加品牌</button>
            </form>
        </div>
    </div>

    <!-- 品牌列表 -->
    <table class="table table-bordered table-striped mt-2">
        <thead>
        <tr>
            <th>#</th>
            <th>品牌名称</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <!-- 表格的主体区域 -->
        <tbody>
        <!-- TODO：循环渲染表格的每一行数据 -->
        <tr v-for="(item,index) in brandlist" :key="item.id">
            <td>{{index+1}}</td>
            <td>{{item.brandname}}</td>
            <td>
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.state">
                    <label class="custom-control-label" :for="item.id" v-if="item.state">已启用</label>
                    <label class="custom-control-label" :for="item.id" v-else="!item.state">已禁用</label>
                </div>
            </td>
            <td>{{item.addtime |dateFormat}}</td>
            <td>
                <a href="#" @click.prevent="removeBrand(item.id)">删除</a>
            </td>
        </tr>

        </tbody>
    </table>
</div>
<script src="./lib/vue-2.6.12.js"></script>

<script>
    //创建全局的过滤器
    Vue.filter("dateFormat", (dateStr) => {
        const dt = new Date(dateStr)
        const y = padZero(dt.getFullYear())
        const m = padZero(dt.getMonth() + 1)
        const d = padZero(dt.getDate())

        const hh = padZero(dt.getHours())
        const mm = padZero(dt.getMinutes())
        const ss = padZero(dt.getSeconds())

        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    })

    function padZero(n) {
        return n > 9 ? n : "0" + n
    }


    const vm = new Vue({
        el: "#app",
        data: {
            brandname: "",
            nextId: 4,
            brandlist: [
                {id: 1, brandname: "宝马", state: true, addtime: new Date()},
                {id: 2, brandname: "奥迪", state: false, addtime: new Date()},
                {id: 3, brandname: "奔驰", state: true, addtime: new Date()},
            ]
        },
        methods: {
            addNewBrand() {
                if (!this.brandname) {
                    return alert("not null")
                }
                this.brandlist.push({
                    id: this.nextId,
                    brandname: this.brandname,
                    state: true,
                    addtime: new Date()
                })
                this.brandname = ""
                this.nextId++

            },
            removeBrand(id) {
                this.brandlist = this.brandlist.filter(x => x.id !== id)
            }
        }
    })
</script>
</body>
</html>

                       

四维空间中的未知点
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ssm+Vue计算机毕业设计租车信息管理系统（程序+LW文档）
SSM毕设程序源码JAVA
01-01 276
ssm+Vue计算机毕业设计租车信息管理系统（程序+LW文档）项目运行环境配置：（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat。
Vue指令综合案例——汽车品牌管理（项目实战）
09-07
包含博主博客【前端知识】【vue学习】中的汽车品牌管理实战项目，实现了1.添加汽车品牌 2.删除汽车品牌 3.搜索品牌,list列表实时变化 html代码如下: 添加品牌id:Name:添加搜索名称关键字:id品牌名称添加时间操作；...
Vue-devTools安装—创建项目方法2 ui创建——Vue指令综合案例——汽车品牌管理
Siobhan_Mxin的博客
09-06 653
vue-devTools安装； vue新建项目：vue ui方式 bootstrap插件安装及使用； vue实现汽车品牌增、删、查操作； vscode代码保存自动格式化设置
Vue实现汽车品牌管理系统
量子前端的博客
09-24 1767
系统如图所示 功能比较简单 1.添加汽车品牌 2.删除汽车品牌 3.搜索品牌，list列表实时变化 html代码如下： <div id = 'app'> <div id = 'title'> 添加品牌 </div> <div id = 'top'> id:<input type="text" v-model = 'id'> Name:<input type="text" v-model = 'name'>
Vue练手--实现车子品牌增删查功能
caipital的博客
09-11 420
页面如下：（为了好看一些，引用了bootstrap框架，如果需要可以去官方下载js、css文件） 将品牌列表渲染到页面： 分析：通过v-for指令渲染即可 <div class="row"> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>id</th
计算机毕业设计系列基于SpringBoot+Vue的汽车销售系统管理系统
zhongtailian的博客
05-24 245
本课程演示的是一套基于SpringBoot+Vue的汽车销售管理系统，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1. 包含：项目源码、项目文档、数据库脚本、软件工具等所有资料 2. 带你从零开始部署运行本套系统 3. 该项目附带的源码资料可作为毕设使用
JavaWeb综合案例——品牌后台管理系统
08-12
最新版JavaWeb综合案例——品牌后台管理系统 来源：改编自黑马程序员最新JavaWeb课程案例 所用技术及工具：Mybatis+Maven+Filter+Ajax+JSON+JavaScript+HTML+CSS+Element+VUE
Vue 指令实现按钮级别权限管理功能
10-17
主要介绍了Vue 指令实现按钮级别权限管理功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue 指令和过滤器的基本使用(品牌管理案例)
10-16
主要介绍了vue-品牌管理案例-指令和过滤器的相关知识，文中通过代码给大家介绍了过滤器的基本使用,需要的朋友可以参考下
vue 实现品牌列表源码
weixin_42595284的博客
10-10 491
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;品牌列表&lt;/title&gt; &lt;link rel="stylesheet" type="text/css"
Vue学习笔记（一）
qq_41045128的博客
06-28 751
Vue学习笔记 官网:https://v3.cn.vuejs.org/guide/introduction.html
【Vue实战】汽车品牌列表表格实现（添加、删除功能）
在热爱技术的路上一直前行。
06-05 661
样式使用Bootstrap渲染 参考：b站黑马程序员vue视频。
Vue.js_实例_品牌列表
徐小硕—心之所向，素履以往
05-08 555
下面做了一个汽车品牌列表的页面，可以对列表信息进行添加、删除和搜索操作 对新学习vue的同学可以作为小练习进行训练 运行截图如下： 其中使用到Bootstrap.js框架 Bootstrap.js链接：Bootstrap.js 下面是代码部分： <!DOCTYPE html> <html> <head> <meta charset=...
HTML2048小游戏（最新版）
最新发布
w11111xxxl的博客
07-17 407
比上一篇文章的2048小游戏更好一点。
高频面试题-HTML
CSDN20221005的博客
07-15 906
离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)空元素： <br> <hr> <img> <input> <link> <meta>->新增了语义化标签(header/footer/nav/asid)->新增了表单增强控件(data/time/email/url)
HTML-VUE页面调用android 客户端网络请求并返回数据
weixin_42504805的博客
07-15 201
确保WebView的设置允许JavaScript接口，并且WebView加载的页面有权限调用这些接口。这样，当用户在Vue页面中点击按钮时，会通过WebView调用Android客户端的网络请求方法，然后将结果回调到Vue页面中显示。在Html-- Vue页面调用Android客户端网络请求并返回数据，通常需要通过WebView与Android客户端的JavaScript接口进行交互。2.在WebView中设置该接口。
JavaWeb---HTML
mmmmazhiyuan的博客
07-14 799
HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容HTML5 是HyperText Markup Language 5 的缩写，HTML5技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了SVG的内容。
HTML2048小游戏
w11111xxxl的博客
07-17 925
游戏控制方向四个按钮，我就不写样式了 源代码在效果图片后面 是可以正常玩的。
vue-router应用——用户登录注册案例
05-24
好的，下面我来为您介绍一下如何使用vue-router实现用户登录注册功能。 首先，我们需要安装vue-router，可以通过以下命令进行安装： ``` npm install vue-router --save ``` 然后，在main.js中引入并使用vue-router： ``` import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 接下来，我们新建一个router.js文件，用于配置路由。在该文件中，我们需要定义路由路径和路由组件： ``` import Vue from 'vue' import VueRouter from 'vue-router' import Login from './components/Login.vue' import Register from './components/Register.vue' Vue.use(VueRouter) const routes = [ { path: '/login', component: Login }, { path: '/register', component: Register } ] const router = new VueRouter({ routes }) export default router ``` 在上面的代码中，我们定义了两个路由路径：/login和/register，并分别对应了Login和Register两个组件。 接下来，在App.vue中，我们需要使用<router-view>标签来显示路由组件： ``` <template> <div id="app"> <router-view></router-view> </div> </template> ``` 最后，在main.js中引入router.js，并将其挂载到Vue实例中： ``` import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app') ``` 至此，我们已经完成了基本的路由配置。接下来，我们可以在Login和Register组件中实现具体的登录和注册功能。 在Login组件中，我们可以使用Vue.js提供的v-model指令来绑定表单输入的数据，并在点击登录按钮时向服务器发送请求验证用户名和密码： ``` <template> <div class="login"> <h1>登录</h1> <form> <label>用户名：</label> <input type="text" v-model="username"> <br> <label>密码：</label> <input type="password" v-model="password"> <br> <button @click.prevent="login">登录</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // 向服务器发送请求验证用户名和密码 } } } </script> ``` 而在Register组件中，我们可以使用v-model指令来绑定表单输入的数据，并在点击注册按钮时向服务器发送请求创建新用户： ``` <template> <div class="register"> <h1>注册</h1> <form> <label>用户名：</label> <input type="text" v-model="username"> <br> <label>密码：</label> <input type="password" v-model="password"> <br> <label>确认密码：</label> <input type="password" v-model="confirmPassword"> <br> <button @click.prevent="register">注册</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '', confirmPassword: '' } }, methods: { register() { // 向服务器发送请求创建新用户 } } } </script> ``` 到这里，我们已经完成了一个简单的用户登录注册功能，并使用vue-router实现了路由跳转。当用户访问/login时，会显示Login组件；当用户访问/register时，会显示Register组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

四维空间中的未知点

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值