品牌列表案例
一. 案例效果
二. 整体实现步骤
- 创建基本的 vue 实例
- 基于 vue 渲染表格数据
- 实现添加品牌的功能
- 实现删除品牌的功能
- 实现修改品牌状态的功能
总结一下我在这个小案例中遇到的一些小问题
第一个：
input的id与label的for冲突问题，导致页面中状态点击任何一个都启用第一个
解决方法：
使用每一个list的id定义input的id跟label的for，解决冲突
第二个：
添加新的品牌
解决办法：
定义brand为内容输入的内容
定义nextid为id
定义一个点击事件，在点击事件内声明一个object对象，里面添加用户输入的内容。最后将object插入到list内
代码
<!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>
<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>
</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="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="'cb' + item.id" v-model="item.status">
<label class="custom-control-label" :for="'cb' + item.id" v-if="item.status">已启用</label>
<label class="custom-control-label" :for="'cb' + item.id" v-else>已禁用</label>
</div>
</td>
<td>{{ item.time }}</td>
<td>
<a href="javascript:;" @click="remove(item.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: '',
nextid: 4,
list: [{
id: 1,
name: '冰淇淋',
status: true,
time: new Date().toLocaleString()
}, {
id: 2,
name: '兰蔻',
status: false,
time: new Date().toLocaleString()
}, {
id: 3,
name: 'JavaScript',
status: true,
time: new Date().toLocaleString()
}, ]
},
methods: {
remove(id) {
this.list = this.list.filter(item => item.id != id)
},
add() {
//如果用户填写的内容为空则return出去
if (this.brand === '') return alert('必须填写品牌名称');
//如果没有return出去，则执行添加方法
const obj = {
id: this.nextid,
name: this.brand,
status: true,
time: new Date().toLocaleString()
}
this.list.push(obj)
this.brand = ''
this.nextid++
}
},
})
</script>
</body>
</html>