根据输入内容创建一个表格
这里的@click相当于v-on:
<!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>Document</title>
<style>
#app {
border: 3px solid gray;
width: 200px;
height: 150px;
display: inline-block;
margin-top: 34px;
float: left;
}
.abb {
border-top: 3px solid rgb(201, 201, 201);
width: 180px;
margin: 0 auto;
}
input {
margin: 12px 10px 0 10px;
}
button {
margin: 12px 10px 8px 10px;
}
table {
border-collapse: collapse;
display: inline-block;
margin: 34px 100px;
}
th {
border: 2px solid black;
padding: 10px;
background: green;
}
td {
border: 2px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div class="contant">
<div id="app">
<input id="input_one" v-model="obj.id" type="text" placeholder="输入编号"><br>
<input id="input_two" v-model="obj.name" type="text" placeholder="输入名称"><br>
<button @click="add">添加数据</button>
<div class="abb"></div>
</div>
<table>
<thead>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td><a href="javascript:;" @click="remove(index)">删除</a></td>
</tr>
</tbody>
</table>
<div style="clear: both;"></div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: ".contant",
data: {
obj: {
id: "",
name: "",
time: ""
},
list: []
},
methods: {
add() {
var d = new Date();
var time = `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
// console.log(time);
this.obj.time = time;
this.list.push(this.obj)
this.obj = {
id: "",
name: "",
time: ""
}
},
remove(index) {
this.list.splice(index, 1);
}
}
})
</script>
</body>
</html>