vue品牌列表案例

最新推荐文章于 2023-07-14 17:54:17 发布
最新推荐文章于 2023-07-14 17:54:17 发布
阅读量806 收藏
点赞数
分类专栏： Vue 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45645345/article/details/124317266
版权

在这里插入图片描述

<!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="./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="./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: true, 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>
xiangchengkang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础-品牌列表案例.zip
12-28
vue基础-品牌列表案例 vue的增删
vue-列表下详情的展开与折叠案例
10-15
主要介绍了vue-列表下详情的展开与折叠案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
一起从零开始学VUE（2）——品牌列表案例
qq_46258819的博客
01-15 1719
VUE小案例——品牌列表案例 利用v-for实现列表的渲染 利用全局过滤器格式化时间 利用v-if来动态渲染数据
Vue-品牌列表案例
a_xia_o的博客
07-14 632
卡片（Card）、表单相关(Forms)、按钮(Buttons)、表格(Tables)插值表达式、属性绑定、事件绑定、双向数据绑定、修饰符、条件渲染、列表渲染、全局过滤器。属性（用来记录下一个可用的id值），并在。注意：需要在data数据中声明。vue指令与过滤器相关的知识点。：监听input输入框的。①创建基本的vue实例。：导入vue的js文件。
【Vue】基于Vue实现品牌列表案例
金鳞踏雨
03-26 288
使用bootstrap4.x相关的技术，例如：卡片、表单、按钮、表格。Vue指令与过滤器相关的知识点。1. 创建基本的 vue 实例 2. 基于 vue 渲染表格数据 3. 实现添加品牌的功能 4. 实现删除品牌的功能 5. 实现修改品牌状态的功能
11、品牌列表案例
s12345672的博客
10-25 597
<!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>品牌列表案例<
Vue图书列表.rar
04-30
Vue小案例——图书列表 对Vue基础和常用特性进行的综合训练，包括数据双向绑定，数组的变异方法和动态数组响应式数据
品牌列表案例初始模板代码
03-19
品牌列表案例初始模板代码
实例分析vue循环列表动态数据的处理方法
01-19
调用方法：Vue.set( target, key, value ) target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据 value ：重新赋的值 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> &...
Vue学习——品牌列表案例（15）
Hoorus的窝
05-15 537
日常学习
Vue的五个核心案例，看一遍就会了看一遍
10-26
Vue的五大核心详解源码export const SOME_MUTATION = 'SOME_MUTATION' export const SOME_MUTATION = 'SOME_MUTATION' export const SOME_MUTATION = 'SOME_MUTATION'
vue2.0——第二天（vue指令、过滤器——＞品牌列表案例）
weixin_48137421的博客
06-21 506
① 能够知道 vue 的基本使用步骤 ⚫ 导入 vue.js 文件 ⚫ new Vue() 构造函数，得到 vm 实例对象 ⚫ 声明 el 和 data 数据节点 ⚫ MVVM 的对应关系 ② 掌握 vue 中常见指令的基本用法 ⚫ 插值表达式、v-bind、v-on、v-if 和 v-else ⚫ v-for 和 :key、v-model ③ 掌握 vue 中过滤器的基本用法 ⚫ 全局过滤器 Vue.filter('过滤器名称', function) ⚫ 私有过滤器 filters 节点...
品牌列表案例(vue)
Rziziの博客
08-29 708
vue 小案例 品牌列表案例 bootstrap渲染 <div id="app"> <!-- 卡片区域 --> <div class="card"> <div class="card-header"> 添加品牌 </div> <div class="card-body">
vue品牌列表案例demo
南北极之间
01-17 242
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>品牌列表</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-b...
vue练习之品牌列表案例
qq_34448522的博客
12-11 901
今天做了一个品牌列表案例，一个动图展示今天的学习成果： 这次页面用了bootstrap框架 上代码： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &am
Vue品牌案例
weixin_44549556的博客
11-18 529
Vue完成品牌列表案例 添加功能 实现效果： 1、画表格 在vs code的扩展中安装Bootstrap 3 Snippets，就可以使用快捷键bs3-table快速创建表格 2、将model中的数据渲染到表格中。使用v-for循环data中的对象 <tr v-for="item in list" :key="item.id"> 3、实现添加功能 使用bs3-panel:prima...
vue中品牌列表案例
保持饥渴、好奇
08-08 988
效果图 用到的知识点 双向数据绑定：v-model 全局的过滤器，进行时间的格式化 实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--//导入js包--&g...
vue——添加品牌列表实例
weixin_51341611的博客
03-01 127
② 基于 vue 渲染表格数据。① 创建基本的 vue 实例。⑤ 实现修改品牌状态的功能。③ 实现添加品牌的功能。④ 实现删除品牌的功能。
Vue学习笔记02day_01.品牌列表案例1
xinpz的博客
09-12 397
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &amp
vue2vue3项目案例
最新发布
07-27
对于一个Vue2和Vue3项目的案例，你可以按照以下步骤进行操作： 1. 首先，安装Vue2和Vue3的脚手架。在你选择的系统盘上创建两个文件夹，分别用于存放Vue2和Vue3版本的项目。进入Vue2文件夹，在地址栏中输入cmd并按...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值