11、品牌列表案例

最新推荐文章于 2023-07-14 17:54:17 发布
最新推荐文章于 2023-07-14 17:54:17 发布
阅读量605 收藏 4
点赞数
分类专栏： 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_凯
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础-品牌列表案例.zip
12-28
vue基础-品牌列表案例 vue的增删
Thinkphp多用户开源商城WSTMall v1.2.2免费下载
09-01
11.商品评价、前台购物车及右侧商品栏增加商品价格属性显示。 12.商品保存时，把商品价格修改为推荐价格。 13.买家中心订单列表增加查询条件。 14.“未支付订单”移到“已取消订单”中。 15.商家商品分类改成双击...
Vue-品牌列表案例
a_xia_o的博客
07-14 638
卡片（Card）、表单相关(Forms)、按钮(Buttons)、表格(Tables)插值表达式、属性绑定、事件绑定、双向数据绑定、修饰符、条件渲染、列表渲染、全局过滤器。属性（用来记录下一个可用的id值），并在。注意：需要在data数据中声明。vue指令与过滤器相关的知识点。：监听input输入框的。①创建基本的vue实例。：导入vue的js文件。
品牌列表案例
m0_60830137的博客
07-18 146
品牌列表
vue中品牌列表案例及涉及到的知识点--完整可执行
yingzi_0322的博客
05-19 224
这个案列中详述了：自定义按键修饰符，自定义指令，自定义过滤器 复习了v-model v-for 自定义按键修饰符 按键修饰符 .后加键 系统提供的有 enter,tab,delete,esc,space,up,down,left,right; 如果要用别的，则可以使用键盘码（键盘上的每个键都对应一个码 比如113=f2)，则是@keyup.113=“add” 如果不用码则需要自定义按键修饰符,如本例中定义的f2 写法是@keyup.f2=“add” 自定义指令 如果需要给keywords添加默认获得
【vue】品牌列表案例（1.1实训）
qq_45746744的博客
01-01 626
基于 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&
网新中英多国语言CMS v9.0.rar
07-05
11、具备传统企业网站基本、高级用户交互功能(公司介绍、新闻、产品、案例、下载、营销网络、客户留言、人才、订单、会员、站内搜索等)； 12、提供公司Google地图设置接口，可在后台进行公司方位标注，在前台同步...
免费企业开源建站系统源码
08-14
模型管理：支持单篇，文章，产品，图片，案例，下载，招聘，视频，品牌，留言，链接等11种模型 分类管理：支持批量增加分类，支持删除进回收站，分类大图，分类小图，中文标题，英文标题，Pc列表模板定义，PC内容...
全新JAVAEE大神完美就业实战课程 超150G巨制课程轻松实战JAVAEE课程 就业部分.txt
12-11
2品牌管理 3规格及模板管理 4安全框架与商家入驻审核 5商品管理1 6商品管理2 7商品管理3 8广告管理与缓存解决方案 9搜索解决方案-Solr-1 10搜索解决方案-Solr-2 11搜索解决方案-Solr-3 12网页静态化解决...
zzzphp免费开源建站系统含手机站
04-06
文章，产品，图片，案例，下载，招聘，视频，品牌，留言，链接等11种模型分类管理：支持批量增加分类，支持删除进回收站，分类大图，分类小图，中文标题，英文标题，Pc列表模板定义，PC内容模板定义，wap列表模板...
品牌列表案例源代码(完成之后的代码)
03-19
Vue基础实现案例
Vue学习——品牌列表案例（15）
Hoorus的窝
05-15 540
日常学习
品牌列表案例(vue)
Rziziの博客
08-29 709
vue 小案例 品牌列表案例 bootstrap渲染 <div id="app"> <!-- 卡片区域 --> <div class="card"> <div class="card-header"> 添加品牌 </div> <div class="card-body">
vue中品牌列表案例
保持饥渴、好奇
08-08 990
效果图 用到的知识点 双向数据绑定：v-model 全局的过滤器，进行时间的格式化 实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--//导入js包--&g...
Vue实现品牌列表案例
qweryitao的博客
11-11 615
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学习小案例（一）：品牌列表案例
zerobaek的博客
01-22 5538
演示目标区域代码（#app）： 用户进行添加查询操作的区域： &lt;div class="panel panel-primary"&gt; &lt;div class="panel-heading"&gt; &lt;h3 class="panel-title"&gt;添加品牌&lt;/h3&gt; &lt;/div&gt; &lt
Vue品牌案例
weixin_44549556的博客
11-18 532
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...
15.品牌列表案例.html
luzhensmart的专栏
11-19 365
&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;
scratch列表 案例
最新发布
09-12
在学习介绍基础数据结构“列表”的过程中，有一个小案例可以帮助我们更好地理解列表的使用。这个案例是一个简单的用户输入系统，在这个系统中，用户可以输入想要说的话，当用户输入完后输入-1，程序就会结束退出。这...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值