我稍微改了点就行了，能渲染出来了
<!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>
</head>
<body>
<div id="app">
<div class="da">
<div class="book">
<div>
<label for="id">
编号：
<input type="text" id="id" v-model='id'/>
</label>
<label for="name">
名称：
</label>
<input type="text" id="name" v-model='name'/>
<button @click="handle">提交</button>
</div>
</div>
</div>
<thead>
<table border="1" width="500" height="200">
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tr :key='item.id' v-for='item in bosl'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>
<a href="" @click.prevent>修改</a> <!-- prevent阻止默认跳转 -->
<span>|</span>
<a href="" @click.prevent>删除</a>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
bosl: [{
id: 1,
name: '王者',
date: ''
},
{
id: 2,
name: '穿越',
date: ''
},
{
id: 3,
name: '飞车',
date: ''
},
{
id: 4,
name: 'HTML',
date: ''
},
]
},
methods: {
handle: function() {
var book = {};
book.id = this.id;
book.name = this.name;
book.date = "";
this.bosl = plus(book);
//清空表单
this.id = '';
this.name = '';
}
}
});
</script>
</body>
</html>
