首页 > 编程札记 > 编程

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

阅读：评论：0

文章目录

- - 阶段检测——品牌列表案例
  - - 要求
    - 实现过程
    - - 1、循环渲染表格行的数据
      - 2、动态生成checkbox的id值
      - 3、实现删除品牌的功能
      - 4、使用全局过滤器格式化时间
    - 完整的实现代码

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

要求

实现过程

1、循环渲染表格行的数据

v-for循环
v-model双向数据绑定
v-if条件渲染

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

      const vm = new Vue({el:"#app",data:{// 用户输入的品牌名称brand: '',// nextId 是下一个，可用的 idnextId: 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:ssVue.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="请输入品牌名称" im="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:ssVue.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 是下一个，可用的 idnextId: 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>