11、品牌列表案例

最新推荐文章于 2022-07-18 10:20:00 发布
最新推荐文章于 2022-07-18 10:20:00 发布
阅读量675 收藏 5
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s12345672/article/details/120953677
版权 
<!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>
  <link rel="stylesheet" href="./lib/bootstrap.css">
  <link rel="stylesheet" href="./css/brandlist.css">
</head>

<body>

  <!-- 将要被vue所控制 -->
  <div id="app">
    <!-- 卡片区域 -->
    <div class="card">
      <div class="card-header">
        添加品牌
      </div>
      <div class="card-body">
        <!-- 添加品牌的表单区域 -->
        <!-- form表单元素有submit事件 -->
        <form @submit.prevent="add">
          <div class="form-row align-items-center">
            <div class="col-auto">
              <div class="input-group mb-2">
                <div class="input-group-prepend">
                  <div class="input-group-text">品牌名称</div>
                </div>
                <input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brand">
              </div>
            </div>
            <div class="col-auto">
              <button type="submit" class="btn btn-primary mb-2">添加</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- 表格区域 -->
    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">品牌名称</th>
          <th scope="col">状态</th>
          <th scope="col">创建时间</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="list in lists" :key="list.id">
          <td>{{ list.id }}</td>
          <td>{{ list.name }}</td>
          <td>
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" :id="'cd'+list.id" v-model="list.status">
              <!-- <label class="custom-control-label" for="customSwitch1">{{list.status ? '已启用':'已禁用'}}</label> -->
              <label class="custom-control-label" :for="'cd'+list.id" v-if="list.status">已启用</label>
              <label class="custom-control-label" :for="'cd'+list.id" v-else="list.status">已禁用</label>
            </div>
          </td>
          <td>{{ list.time }}</td>
          <td>
            <a href="javascript:;" @click="remove(list.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        brand: '',
        // 品牌数据列表
        lists: [
          { id: 1, name: '宝马', status: true, time: new Date() },
          { id: 2, name: '奥迪', status: false, time: new Date() },
          { id: 3, name: '奔驰', status: true, time: new Date() },
        ]
      },
      methods: {
        // 点击链接删除对应的品牌
        remove(id) {
          console.log(id);
          this.lists = this.lists.filter(list => list.id !== id);
        },
        // 阻止表单提交后添加品牌的功能
        add() {
          if (this.brand === '') {
            alert('请填写品牌名称!');
            return;
          } else {
            // 准备一个对象
            const obj = {
              id: this.lists.length + 1,
              name: this.brand,
              status: true,
              time: new Date()
            }
            // 将obj对象添加到数组当中
            this.lists.push(obj);
            this.brand = '';
          }
        }
      }
    })
  </script>
</body>

</html>

body {
  padding: 15px;
  user-select: none;
}

body {
  padding: 15px;
  user-select: none;
}

在这里插入图片描述

Sun Jiakai_凯
关注
专栏目录
黑马程序员最新版JavaWeb综合案例(前后端完整版)
鲁棒最小二乘支持向量机
06-28 10万+
黑马程序员最新版JavaWeb综合案例(前后端完整版)
jQuery案例
WangZhang_521的博客
05-06 2725
01-精品展示案例 <!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"> <t
vue基础-品牌列表案例.zip
12-28
vue基础-品牌列表案例 vue的增删
品牌列表案例(vue)
Rziziの博客
08-29 780
vue 小案例 品牌列表案例 bootstrap渲染 <div id="app"> <!-- 卡片区域 --> <div class="card"> <div class="card-header"> 添加品牌 </div> <div class="card-body">
vue品牌列表案例
qq_45645345的博客
04-21 842
<!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 的样式表 --> .
一起从零开始学VUE（2）——品牌列表案例
qq_46258819的博客
01-15 1932
VUE小案例——品牌列表案例 利用v-for实现列表的渲染 利用全局过滤器格式化时间 利用v-if来动态渲染数据
【vue】品牌列表案例（1.1实训）
qq_45746744的博客
01-01 675
基于 vue 渲染表格数据 步骤1：使用 v-for 指令循环渲染表格的数据 <tr v-for="brand in brandlist" :key="brand.id"> <td>{{brand.id}}</td> <td>{{brand.brandname}}</td> <td>{{brand.state}}</td> <td>{{brand.addtime}}</td> <td&
BootStrap入门案例.zip
10-11
8. **day11_BootStrap.iml** - 这是一个IDE（集成开发环境）项目配置文件，可能是使用IntelliJ IDEA或其他类似工具创建的，用于管理Bootstrap学习项目的构建和依赖。 9. **css** - 这可能是一个目录，包含了自定义...
网站推广100个案例样本.doc
最新发布
12-06
11. 邮件列表推广：定期发送电子杂志，保持与订阅者的联系。 12. 非预期邮件推广：批量收集邮箱地址，发送有价值的信息，注意邮件标题的吸引力，避免被视为垃圾邮件。 13. 口碑推广：专注于提供优质内容，让网民...
bootstrap单页案例技能展示网站模板
04-02
7. **案例展示**：为了展示过去的项目或作品，可以利用 Bootstrap 的卡片组件（card）来创建一个美观的案例列表，每个卡片包含项目简介、图片预览和链接到详细信息。 8. **企业信息**：企业相关的资讯，如团队成员...
html列表例子
04-17
html列表例子
Vue----品牌列表案例
emmmm.....
03-11 785
效果图 代码 <!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 核心 CSS 文
Vue实现品牌列表案例
qweryitao的博客
11-11 645
Vue实现品牌列表案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>品牌列表案例</title> <script src="https://cdn.staticfile.org/vue/2.6.10/v...
Vue学习——品牌列表案例（15）
Hoorus的窝
05-15 588
日常学习
品牌列表案例
m0_60830137的博客
07-18 191
品牌列表
01.品牌列表案例
weixin_30505043的博客
05-21 245
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
vue中品牌列表案例及涉及到的知识点--完整可执行
yingzi_0322的博客
05-19 271
这个案列中详述了：自定义按键修饰符，自定义指令，自定义过滤器 复习了v-model v-for 自定义按键修饰符 按键修饰符 .后加键 系统提供的有 enter,tab,delete,esc,space,up,down,left,right; 如果要用别的，则可以使用键盘码（键盘上的每个键都对应一个码 比如113=f2)，则是@keyup.113=“add” 如果不用码则需要自定义按键修饰符,如本例中定义的f2 写法是@keyup.f2=“add” 自定义指令 如果需要给keywords添加默认获得
Vue之品牌列表案例
Jamesaonier的博客
04-07 603
Vue之品牌列表案例直接上代码 直接上代码 Document <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> ...
三菱PLC编程案例：碾压机通讯控制源码与应用实例
三菱PLC支持多种编程语言，包括梯形图、指令列表（IL）、顺序功能图（SFC）和结构化文本（ST）等。 3. 编程案例的结构和特点： 碾压机相关的PLC编程案例通常会涉及到机械动作控制、状态监测、故障处理等多个方面。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值