一起从零开始学VUE（2）——品牌列表案例
文章目录 完整的实现代码
阶段检测——品牌列表案例 要求
实现过程 1、 循环渲染表格行的数据
①在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>
③利用双向数据绑定指令来控制的状态，使用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、动态生成的id值
上一步中基本的框架已经实现了，但是状态那边点击却没有反应。这边我们需要复习一下label的for属性。
label的for属性规定label与哪个表单元素绑定，这样子是为了扩大点击响应的范围，从而提高用户体验
（没有使用for属性)
（使用for属性)
通过对比，我们可以看出，不使用for属性进行绑定的话，我们必须点击才能进行响应，这样的用户体验是稍微差点的，而使用了for属性，当点击男/女的时候也可以改变的状态。
了解完后，我们就可以对上一步代码进行修改
<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、实现删除品牌的功能
上面两种方法东可以实现删除操作，这边使用第一种方法
<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="请输入品牌名称" 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: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>
tags:
vue
