效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app" >
<form @submit.prevent='add'>
<div class="panel panel-primary">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<input type="text" v-model="brand">
<input type="submit" value="添加">
</div>
</div>
</form>
<table class="table table-bordered table-condensed">
<thead>
<td>#</td>
<td>品牌名称</td>
<td>状态</td>
<td>创建时间</td>
<td>操作</td>
</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===false">已禁用</label>
<label class="custom-control-label" :for="'cb'+ item.id" v-else>已启用</label>
</div>
</td>
<td>{{item.time}}</td>
<td><a href="#" @click="remove(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js>vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
nextId: 4,
list: [
{ id: 1, name:'宝马', status:true, time: new Date() },
{ id: 2, name:'奔驰', status:false, time: new Date() },
{ id: 3, name:'奥迪', status:true, time: new Date() }
],
brand: ''
},
methods: {
remove(id) {
this.list = this.list.filter( item => item.id !== id )
},
add() {
if ( this.brand==='' ) {
alert('输入的品牌名为空');
return;
}
this.list.push({id: this.nextId, name: this.brand, status: true, time: new Date()});
this.nextId++;
this.brand = ''
}
}
})
</script>
</body>
</html>
