app.js:
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://cdn.jsdelivr.net/vue/1.0.7/vue.min.js"></scri
</head>
<body>
<table class="table table-striped" id="app">
<tr class="active">
<th>序号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
</tr>
<tr class="active" v-for="book in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.price}}</td>
</tr>
</table>
<div id="add-book">
<length>添加书籍</length>
<div class="form-group form-group-lg">
<label for="">书名</label>
<input type="text" class="form-control" v-model="book.name">
</div>
<div class="form-group form-group-lg">
<label for="">作者</label>
<input type="text" class="form-control" v-model="book.author">
</div>
<div class="form-group form-group-lg">
<label for="">价格</label>
<input type="text" class="form-control" v-model="book.price">
</div>
<button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button>
</div>
<script src="app.js" language="javascript"></script>
</body>
</html>app.js
new Vue({
el:'#app',
data: {
book: {
id:0,
author: '',
name: '',
price: ''
},
books: [{
id:1,
author: '曹雪芹',
name: '红楼梦',
price: '32.0'
}, {
id:2,
author: '施耐庵',
name: '水浒传',
price: '30.0'
}, {
id:3,
author: '罗贯中',
name: '三国演义',
price: '24.0'
}, {
id:4,
author: '吴承恩',
name: '西游记',
price: '20.0'
}]
},
methods: {
addBook: function () {
this.book.id = this.books.length + 1;
this.books.push(this.book);
this.book = '';
}
}
})为什么按钮button没有办法添加
你new Vue的时候el属性传的不对，你的#app跟#add-book是同级标签，你的vue组件 new Vue({el: '#app'})自然只对#app节点以内有效
el控制域错了，v-on应该包含id #app里面，改一下就行。