<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0 auto;
padding: 0;
}
.book {}
</style>
</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>
</div>
</body>
<script type="text/javascript">
var mv = 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>
是滴，你前面问的我发了一下代码，你可以看看。
id和name需要在data里定义啊。要不然没法使用 vue基础语法啊
模板上使用的数据要在data中定义