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

最新推荐文章于 2024-04-10 13:23:20 发布

啾比特

最新推荐文章于 2024-04-10 13:23:20 发布

阅读量1.7k

点赞数 3

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46258819/article/details/122507440

版权

VUE 专栏收录该内容

25 篇文章 7 订阅

订阅专栏

文章目录

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

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

要求

请添加图片描述

实现过程

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>