一起从零开始学VUE（2）——品牌列表案例

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

文章目录

阶段检测——品牌列表案例

要求

请添加图片描述

实现过程
1、 循环渲染表格行的数据
  • v-for循环
  • v-model双向数据绑定
  • v-if条件渲染

①在data中定义需要输出的列表

      const vm = new Vue({
           el:"#app",
           data:{
             // 用户输入的品牌名称
            brand: '',
            // nextId 是下一个，可用的 id
            nextId: 4,
            // 品牌的列表数据
               list:[
                   {id:1, name:'宝马', status:true, time: new Date()},
                   {id:2, name:'别克', status:true, time: new Date()},
                   {id:3, name:'奔驰', status:true, time: new Date()}
                   ]
           }
                })

②在tbody中循环渲染表格行的数据（注意：v-for一定要绑定一个:key属性）

<tbody>
    <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>
            {{item.status}}
        </td>
        <td>{{ item.time }}</td>
        <td><a href="javascript:;">删除</a></td>
    </tr>
</tbody>

③利用双向数据绑定指令来控制checkbox的状态，使用v-if条件渲染指令来控制标签中的内容

<tbody>
    <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>
            <div class="custom-control custom-switch">
                <input type="checkbox"  class="custom-control-input" v-model="item.status">
                <label class="custom-control-label"  v-if="item.status">已启用</label>
                <label class="custom-control-label"  v-else>已禁用</label>
            </div>
        </td>
        <td>{{ item.time }}</td>
        <td><a href="javascript:;">删除</a></td>
    </tr>
</tbody>

请添加图片描述

通过这一步大致的框架就已经完成了

2、动态生成checkbox的id值

上一步中基本的框架已经实现了，但是状态那边点击checkbox却没有反应。这边我们需要复习一下label的for属性。

label的for属性规定label与哪个表单元素绑定，这样子是为了扩大点击响应的范围，从而提高用户体验

请添加图片描述（没有使用for属性)请添加图片描述（使用for属性)

通过对比，我们可以看出，不使用for属性进行绑定的话，我们必须点击checkbox才能进行响应，这样的用户体验是稍微差点的，而使用了for属性，当点击男/女的时候也可以改变checkbox的状态。

了解完后，我们就可以对上一步代码进行修改

  • 属性绑定指令v-bind:(: )
<tbody>
    <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>
            <div class="custom-control custom-switch">
                <input type="checkbox"  class="custom-control-input"  :id="'id'+item.id" v-model="item.status">
                <label class="custom-control-label"  :for="'id'+item.id" v-if="item.status">已启用</label>
                <label class="custom-control-label"  :for="'id'+item.id" v-else>已禁用</label>
            </div>
        </td>
        <td>{{ item.time }}</td>
        <td><a href="javascript:;">删除</a></td>
    </tr>
</tbody>
3、实现删除品牌的功能
  • splice(index,num,item1,item2,…,itemX) 从数组中删除项目，然后返回被删除的项目。
  • filter过滤器

上面两种方法东可以实现删除操作，这边使用第一种方法

<td><a href="javascript:;" @click="remove(item.id)">删除</a></td>
           methods:{
               remove(id){
                var index = this.list.findIndex(item => {
                    if (item.id == id){ 
                        return true;
                    }
                })
                  this.list.splice(index,1)
               }
           }

请添加图片描述

4、使用全局过滤器格式化时间

不了解全局过滤器的UU们，可以看这篇博文——>

<td>{{ item.time |  Dateformat}}</td>
<script>
      // 声明格式化时间的全局过滤器 YYYY-MM-DD HH:mm:ss
      Vue.filter('Dateformat',function(time){
        // 调用dayjs()得到当前时间，dayjs(time)得到指定的时间
        
        return dayjs(time).format("YYYY-MM-DD HH:mm:ss")
      })
</script>

在这里插入图片描述

完整的实现代码
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <link rel="stylesheet" href="./css/brandlist.css">

</head>
<body>
    <div id="app">
        <div class="card">
            <div class="card-header">
                添加品牌
            </div>
        <div class="card-body">
            <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>
          <table class="table table-bordered table-hover table-striped">
              <thead>
                  <tr>
                    <th>#</th>
                    <th>品牌名称</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
              </thead>
              <tbody>
                  <tr v-for="item in list" :key="item.id">
                      <td>{{ item.id }}</td>
                      <td>{{ item.name }}</td>
                      <td>
                            <div class="custom-control custom-switch">
                                <input type="checkbox"  class="custom-control-input"  :id="'id'+item.id" v-model="item.status">
                                <label class="custom-control-label"  :for="'id'+item.id" v-if="item.status">已启用</label>
                                <label class="custom-control-label"  :for="'id'+item.id" v-else>已禁用</label>
                            </div>
                        </td>
                      <td>{{ item.time |  Dateformat}}</td>
                      <td><a href="javascript:;" @click="remove(item.id)">删除</a></td>
                  </tr>
              </tbody>
          </table>

        </div>
    </div>
  <script src="./lib/dayjs.min.js"></script>
  <script src="./lib/vue-2.6.12.js"></script>
    <script>
      // 声明格式化时间的全局过滤器 YYYY-MM-DD HH:mm:ss
      Vue.filter('Dateformat',function(time){
        // 调用dayjs()得到当前时间，dayjs(time)得到指定的时间
        
        return dayjs(time).format("YYYY-MM-DD HH:mm:ss")
      })
      const vm = new Vue({
           el:"#app",
           data:{
             // 用户输入的品牌名称
            brand: '',
            // nextId 是下一个，可用的 id
            nextId: 4,
            // 品牌的列表数据
               list:[
                   {id:1, name:'宝马', status:true, time: new Date()},
                   {id:2, name:'别克', status:true, time: new Date()},
                   {id:3, name:'奔驰', status:true, time: new Date()}
                   ]
           },
           methods:{
               remove(id){
                var index = this.list.findIndex(item => {
                    if (item.id == id){ 
                        return true;
                    }
                })
                  this.list.splice(index,1)
               }
           }
                })
    </script>
</body>
</html>
从零开始创建vue3项目——包含项目初始化、element-plus、eslint、axios、router、pinia、echarts
m0_73761441的博客
07-23 2866
从零开始创建vue3项目——包含项目初始化、element-plus、eslint、axios、router、pinia、echarts
从零开始打造vue---购物车案例
m0_67390788的博客
03-06 503
目录 ?购物车案例 1. 案例效果 ?2. 实现步骤 1. 初始化项目结构 2. 封装 es-header 组件 3. 基于 axios 请求商品列表数据 4. 封装 es-footer 组件 5. 封装 es-goods 组件 实现合计、结算数量、全选功能 6.1 动态统计已勾选商品的总价格 6.2 动态统计已勾选商品的总数量 6.3 实现全选功能 7. 封装 es-counter 组件 购物车案例 1. 案例效果 2. 实现步骤 ① 初始化项目基本结构 ② 封装 EsHeader 组件 ③ 基于
vue基础-品牌列表案例.zip
12-28
vue基础-品牌列表案例 vue的增删
品牌列表案例(vue)
Rziziの博客
08-29 802
vue 小案例 品牌列表案例 bootstrap渲染 <div id="app"> <!-- 卡片区域 --> <div class="card"> <div class="card-header"> 添加品牌 </div> <div class="card-body">
vue品牌列表案例
qq_45645345的博客
04-21 868
<!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 的样式表 --> .
11、品牌列表案例
s12345672的博客
10-25 718
<!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----品牌列表案例
emmmm.....
03-11 808
效果图 代码 <!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 文
从零开始学WEB前端——前置知识以及环境搭建
m0_67266042的博客
03-06 1184
??项目介绍 先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员??。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员??。 该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过并觉得不错才
从零开始学WEB前端——网页的骨架——HTML实战练习
m0_67266171的博客
03-06 368
??项目介绍 先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员??。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员??。 该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过并觉得不错才
Vue实现品牌列表案例
qweryitao的博客
11-11 665
Vue实现品牌列表案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>品牌列表案例</title> <script src="https://cdn.staticfile.org/vue/2.6.10/v...
品牌列表案例源代码(完成之后的代码)
03-19
Vue基础实现案例
【vue】品牌列表案例（1.1实训）
qq_45746744的博客
01-01 732
基于 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&
Vue学习——品牌列表案例（15）
Hoorus的窝
05-15 621
日常学习
品牌列表案例
m0_63400611的博客
05-11 538
案例效果 代码 需要引入bootstrap.css文件 index.html <!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,
Vue-品牌列表案例
最新发布
a_xia_o的博客
07-14 774
卡片（Card）、表单相关(Forms)、按钮(Buttons)、表格(Tables)插值表达式、属性绑定、事件绑定、双向数据绑定、修饰符、条件渲染、列表渲染、全局过滤器。属性（用来记录下一个可用的id值），并在。注意：需要在data数据中声明。vue指令与过滤器相关的知识点。：监听input输入框的。①创建基本的vue实例。：导入vue的js文件。
vue中品牌列表案例及涉及到的知识点--完整可执行
yingzi_0322的博客
05-19 286
这个案列中详述了：自定义按键修饰符，自定义指令，自定义过滤器 复习了v-model v-for 自定义按键修饰符 按键修饰符 .后加键 系统提供的有 enter,tab,delete,esc,space,up,down,left,right; 如果要用别的，则可以使用键盘码（键盘上的每个键都对应一个码 比如113=f2)，则是@keyup.113=“add” 如果不用码则需要自定义按键修饰符,如本例中定义的f2 写法是@keyup.f2=“add” 自定义指令 如果需要给keywords添加默认获得
vue中品牌列表案例
保持饥渴、好奇
08-08 1046
效果图 用到的知识点 双向数据绑定：v-model 全局的过滤器，进行时间的格式化 实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--//导入js包--&g...
01.品牌列表案例
weixin_30505043的博客
05-21 257
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值