vue.js实现图书管理功能

时间:2020-05-17 Dwell_hls 人气:0

本文实例为大家分享了vue.js实现图书管理功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="vue.js"></script>
 </head>
 <body>
 <div id="app">
 <table rules="rows" frame="hsides" bordercolor="black" width="600px">
 <tr v-for="book in books " text-align="center">
  <th>序号：</th>
  <td>{{book.id}}</td>
  <th>书名：</th>
  <td>{{book.name}}</td>
  <th>作者：</th>
  <td>{{book.author}}</td>
  <th>价格：</th>
  <td>{{book.price}}</td>
  <td> 
  <button type="button" class="btn btn-danger" @click="delBook(book)">删除</button>
  </td>
 </tr>
 </table>
 <br>
 <div id="add-book">
 <legend>添加书籍</legend>
 <br>
 <div>
  <label for="">书名</label>
  <input type="text" v-model="book.name">
 </div>
 <div>
  <label for="">作者</label>
  <input type="text" v-model="book.author">
 </div>
 <div>
  <label for="">价格</label>
  <input type="text" v-model="book.price">
 </div>
 
 <br>
 <button v-on:click="addBook()">添加</button>
 
 </div>
 </div>

 <script>
 var vm = 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() {
  //计算书的id
  this.book.id = this.books.length + 1;
  this.books.push(this.book);
  //将input中的数据重置
  this.book = {};
  },
  delBook: function(book) {
  this.books.splice(this.books.indexOf(book),1);
  }
 }
 })
 </script>
 </body>
</html>

加载全部内容