利用Vue怎么實現一個購物車功能-創(chuàng)新互聯

這篇文章給大家介紹利用Vue怎么實現一個購物車功能，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯建站服務項目包括桐城網站建設、桐城網站制作、桐城網頁制作以及桐城網絡營銷策劃等。多年來，我們專注于互聯網行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯網行業(yè)的解決方案，桐城網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到桐城省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

具體方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link href="/tupian/20230522/bootstrap.css
</head>
<body>
 <div id="app">
 <div v-if="books.length">
  <table class="table table-dark">
  <thead>
   <tr>
   <th scope="col">ID</th>
   <th scope="col">書籍名稱</th>
   <th scope="col">出版日期</th>
   <th scope="col">書籍價格</th>
   <th scope="col">購買數量</th>
   <th scope="col">操作</th>
   </tr>
  </thead>
  <tbody>
   <tr v-for="(item,index) in books">
   <th scope="row">{{item.id}}</th>
   <td>{{item.name}}</td>
   <td>{{item.date}}</td>
   <td>{{item.price | dealPrice}}</td>
   <td>
    <button class="btn btn-primary" @click="decrement(index)" :disabled="item.count <= 0">-</button>
    {{item.count}}
    <button class="btn btn-primary" @click="increment(index)">+</button>
   </td>
   <td>
    <button class="btn btn-danger" @click="removeBook(index)">移除</button>
   </td>
   </tr>
  </tbody>
  </table>
  <h3>總價為 {{totalPrice | dealPrice}}</h3>
 </div>
 <h3 v-else>購物車為空</h3>
 </div>
 <script src="vue.js"></script>
 <script>
 const app = new Vue({
  el:'#app',
  data:{
  books:[
   {
   id:1,
   name:'PHP手冊',
   date:'2020年5月17號',
   price:33,
   count:1
   },
   {
   id:2,
   name:'Python手冊',
   date:'2020年5月17號',
   price:33,
   count:1
   },
   {
   id:3,
   name:'Linux手冊',
   date:'2020年5月17號',
   price:33,
   count:1
   },
  ],
  },
  computed:{
  totalPrice(){
   let price = 0;
   for (let i = 0;i<this.books.length;i++) {
   price += this.books[i].price * this.books[i].count
   }
   return price;
  }
  },
  methods:{
  increment(index){
   this.books[index].count ++
  },
  decrement(index) {
   this.books[index].count --
  },
  removeBook(index) {
   this.books.splice(index,1)
  }
  },
  filters: {
  dealPrice(price){
   return '$' + price.toFixed(2)
  }
  }
 })
 </script>
</body>
</html>

關于利用Vue怎么實現一個購物車功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當前標題：利用Vue怎么實現一個購物車功能-創(chuàng)新互聯
標題網址：http://muchs.cn/article24/ceejce.html

成都網站建設公司_創(chuàng)新互聯，為您提供云服務器、標簽優(yōu)化、網站設計、網站導航、營銷型網站建設、響應式網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

網站優(yōu)化排名