快捷導(dǎo)航

vue實(shí)現(xiàn)圖書管理demo詳解

更新時(shí)間：2017年10月17日 14:55:54 作者：白開水

這篇文章主要介紹了vue實(shí)現(xiàn)圖書管理，分享了圖書管理demo用的知識(shí)點(diǎn)，以及遇到問題的總結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

年后公司的項(xiàng)目要求用到vue.js知識(shí)，我angular沒有學(xué)，node.js和react也只是了解了一點(diǎn)點(diǎn)，所以學(xué)起來比較困難。如果你想學(xué)vue.js的知識(shí)，推薦網(wǎng)址：http://vuejs.org/

詳細(xì)內(nèi)容如下：

一、圖書管理demo用的知識(shí)點(diǎn)

1、bootstrap：http://getbootstrap.com/

2、vuejs：http://getbootstrap.com/

具體代碼如下：

html部分

<div id="app" class="container">
 <table class="table table-bordered">
 <div v-for = "book in books">
  <tr>
  <th>書名</th>
  <th>書的價(jià)格</th>
  <th>書的數(shù)量</th>
  <th>小計(jì)</th>
  <th>操作</th>
  </tr>
  <tr v-for = "(index,book ) in books">
  <td>{{book.name}}</td>
  <td>{{book.price}}</td>
  <td><button @click="book.count&&book.count--">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td>
  <td>{{book.price*book.count}}</td>
  <td><button class="btn btn-danger" @click="deleteBook(book)">刪除</button></td>
  </tr>
  <tr>
  <td colspan="5">
  總價(jià){{total}}
  </td>
  </tr>
 </div>
 </table>
 <div class="form-group">
 <label for="bookname" id="bookname">書名</label>
 <input type="text" v-model="list.name" class="form-control"/>
 </div>
 <div class="form-group">
 <label for="bookprice" id="bookprice">價(jià)格</label>
 <input type="text" v-model="list.price" class="form-control"/>
 </div>
 <div class="form-group">
 <label for="bookcount" id="bookcount">數(shù)量</label>
 <input type="text" v-model="list.count" class="form-control"/>
 </div>
 <div class="form-group">
 <button class="btn btn-primary" @click="add">添加</button>
 </div>
 </div>

腳本部分

<script src="js/vue.js"></script>
 <script>
 var vm = new Vue({
 el:"#app",
 data:{
  books:[
  {name:'VUE js',price:40,count:1},
  {name:'NODE js',price:20,count:1},
  {name:'REACT js',price:30,count:1},
  {name:'ANGULAR js',price:100,count:1},
  {name:'JQUERY js',price:50,count:1},
  ],
  list:{
  name:'',
  price:'',
  count:''
  }
 },
 methods:{
  deleteBook(book){
  // vue 給我們提供了一個(gè) $remove的方法，在數(shù)組中刪除
  this.books.$remove(book);
  /*this.books = this.books.filter((item)=>{
  return item != book
  })*/
  },
  add(){
  this.books.push(this.list);
  this.list = {
  name:'',
  price:'',
  count:''
  }
  }
 },
 computed:{
  total(){
  var sum = 0;
  this.books.forEach(item =>{
  sum += item.price*item.count;
  })
  return sum;
  }
 }
 });
</script>

遇到難點(diǎn)總結(jié)

當(dāng)數(shù)量小于0時(shí)，判斷方法，解決方法有很多種，下面總結(jié)有3中方法

(一)最簡(jiǎn)單的方法

根據(jù)邏輯判斷，這里要注意邏輯判斷的順序，代碼如下：

復(fù)制代碼代碼如下:

<td><button @click="book.count&&book.count--">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td>

（二）這里要注意this指向問題

復(fù)制代碼代碼如下:

<td><button @click="min(index,book.count)">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td>

methods:{
  min(index){
  if(this.books[index].count>0){
  this.books[index].count = parseInt(this.books[index].count) - 1;
  }
  },
  deleteBook(book){
  // vue 給我們提供了一個(gè) $remove的方法，在數(shù)組中刪除
  this.books.$remove(book);
  /*this.books = this.books.filter((item)=>{
  return item != book
  })*/
  },
  add(){
  this.books.push(this.list);
  this.list = {
  name:'',
  price:'',
  count:''
  }
  }
 }

(三) v-on執(zhí)行時(shí)傳參問題

復(fù)制代碼代碼如下:

<td><button @click="min(book)">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td>

min(book){
 if(book.count>0){
 book.count = parseInt(book.count) - 1;
 }
}

總結(jié)：

v-on執(zhí)行方法的時(shí)候需要傳遞參數(shù)的時(shí)候添加()，如果不需要傳遞參數(shù)就不用加上()
如果需要傳遞參數(shù)，我們需要手動(dòng)傳入事件源

建議：

1、如果您有充足的時(shí)間來學(xué)習(xí)vue，務(wù)必要把js基礎(chǔ)打好，學(xué)習(xí)下angular.js

2、學(xué)會(huì)在網(wǎng)上找資料。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue實(shí)現(xiàn)圖書管理demo詳解

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具