【转】VUE2 表格绑定
资料及内容来自 黑马程序员
点击下载 代码片断：
<!DOCTYPE html>
<html>
<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>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css" />
<style>
:root {
font-size: 13px;
}
body {
padding: 8px;
}
</style>
</head>
<body>
<div id="app">
<div class="card">
<h5 class="card-header">添加品牌</h5>
<div class="card-body">
<!-- 添加品牌的表单 -->
<form class="form-inline" @submit.prevent>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">品牌名称</div>
</div>
<!-- 文本输入框 -->
<input type="text" class="form-control" v-model.trim="brandname" @keyup.esc="brandname = ''" />
</div>
<!-- 提交表单的按钮 -->
<button type="submit" class="btn btn-primary mb-2" @click="addNewBrand">添加品牌</button>
</form>
</div>
</div>
<table class="table table-bordered table-striped mt-2">
<thead>
<tr>
<th>#</th>
<th>品牌名称</th>
<th>状态</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in brandlist" :key="item.id">
<td>{{index + 1}}</td>
<td>{{item.brandname}}</td>
<td>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.state" />
<label class="custom-control-label" :for="item.id" v-if="item.state">已启用</label>
<label class="custom-control-label" :for="item.id" v-else>已禁用</label>
</div>
</td>
<td>{{item.addtime | dateFormat}}</td>
<td>
<a href="#" @click.prevent="removeBrand(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
// 创建全局的过滤器
Vue.filter('dateFormat', (dateStr) => {
const dt = new Date(dateStr)
const y = dt.getFullYear()
const m = padZero(dt.getMonth() + 1)
const d = padZero(dt.getDate())
const hh = padZero(dt.getHours())
const mm = padZero(dt.getMinutes())
const ss = padZero(dt.getSeconds())
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
// 补零的函数
function padZero(n) {
return n > 9 ? n : '0' + n
}
const vm = new Vue({
el: '#app',
data:{
brandname: '',
nextId: 4,
brandlist:[
{id:1,brandname:'宝马',state:true,addtime: new Date()},
{id:2,brandname:'奥迪',state:true,addtime: new Date()},
{id:3,brandname:'奔驰',state:true,addtime: new Date()}
]
},
methods: {
// 添加新的品牌数据
addNewBrand() {
// 判断品牌名称是否为空
if (!this.brandname)
return alert('品牌名称不能为空！')
// 添加新的品牌数据
this.brandlist.push({
id: this.nextId,
brandname: this.brandname,
state: true,
addtime: new Date(),
})
// 重置文本框的值
this.brandname = ''
// 让 nextId 自增 +1
this.nextId++
},
// 根据 Id 删除对应的数据
removeBrand(id) {
this.brandlist = this.brandlist.filter((x) => x.id !== id)
},
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号