vue.javascript如何实现图书管理功能

为了把明天的工作做好,我们必须把今天的工作先做好了,不要给明天的工作找麻烦。在工作面前,态度决定一切。没有不重要的工作,只有不重视工作的人。不同的态度,成就不同的人生,有什么样的态度就会产生什么样的行为,从而决定不同的结果。

本文实例为大家分享了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>

以上就是vue.javascript如何实现图书管理功能。恋情就像一捧沙,抓得越紧,消散得越多。更多关于vue.javascript如何实现图书管理功能请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明