Vue简单实现购物车（笔记）

最新推荐文章于 2025-06-16 21:18:19 发布

原创最新推荐文章于 2025-06-16 21:18:19 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

前端同时被 2 个专栏收录

14 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文介绍了如何使用Vue.js框架轻松构建购物车功能。通过HTML布局、JavaScript逻辑和CSS样式，详细展示了Vue组件化思想在购物车应用中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue简单实现购物车：

html部分：

<div id="app">
  <div v-if="books.length > 0">
	<table class="pure-table pure-table-bordered">
		<thead>
		  <tr>
			<th></th>
			<th>书籍名称</th>
			<th>出版时间</th>
			<th>价格</th>
			<th>购买数量</th>
			<th>操作</th>
		  </tr>
		</thead>
	    <tbody>
		  <tr v-for="(item,index) in books">
			<td>{{item.id}}</td>
			<td>{{item.name}}</td>
			<td>{{item.time}}</td>
			<td>{{item.price | showPrice}}</td>
			<td>
			  <button @click="decrement(index)" :disabled="item.count <= 1">-</button>
			  {{item.count}}
			  <button @click="increment(index)">+</button>
			</td>
			<td><button @click="removeHandle(index)">移除</button></td>
		  </tr>
	    </tbody>
	</table>
	<h2>总数量：{{allCount}}</h2>
	<h2>总价：{{allPrice | showPrice}}</h2>
  </div>
  <h2 v-else>购物车为空</h2>
</div>

js部分：

const app = new Vue({
  el : '#app',
  data : {
    books : [
	  {
		id : 1,
		name : '《算法导论》',
		time : '2006-9',
		price : 85.00,
		count : 1
	  },
	  {
		id : 2,
		name : '《UNIX编程艺术》',
		time : '2006-2',
		price : 59.00,
		count : 1
	  },
	  {
		id : 3,
		name : '《编程珠玑》',
		time : '2008-10',
		price : 139,
		count : 1
	  },
	  {
		id : 4,
		name : '《代码大全》',
		time : '2006-3',
		price : 128.00,
		count : 1
	  }
	]
  },
  methods : {
	increment(index){
	  this.books[index].count++;
	},
	decrement(index){
	  this.books[index].count--;
	},
    removeHandle(index){
	  this.books.splice(index,1);
	}
  },
  computed : {
    allPrice(){
	  // 1、普通 for 循环
	  /*
	  let allPrice = 0;
	  for ( let i = 0 ; i < this.books.length ; i++ ){
		allPrice += this.books[i].price * this.books[i].count;
	  }
	  return allPrice;
	  */

	  // 2、for ( let i in this.books )
	  /*
	  let allPrice = 0;
	  for ( let i in this.books ){
		allPrice += this.books[i].price * this.books[i].count;
	  }
	  return allPrice;
	  */

	  // 3、for ( let i of this.books )
	  let allPrice = 0;
	  for ( let i of this.books ){
		allPrice += i.price * i.count;
	  }
	  return allPrice;

	},
	allCount(){
	  let allCount = 0;
	  for ( let i = 0 ; i < this.books.length ; i++ ){
		allCount += this.books[i].count;
	  }
	  return allCount;
	}
  },
  filters : {
	showPrice(price){
	  return '￥' + price.toFixed(2);
	}
  }
})

css部分：

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
 
body {
    margin: 10px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
td,th {
    padding: 0;
}
 
.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}
 
.pure-table caption {
    color: #000;
    font: italic 85%/1 arial,sans-serif;
    padding: 1em 0;
    text-align: center;
}
 
.pure-table td,.pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: .5em 1em;
}
 
.pure-table thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}
 
.pure-table td {
    background-color: transparent;
}
 
.pure-table-bordered td {
    border-bottom: 1px solid #cbcbcb;
}
 
.pure-table-bordered tbody>tr:last-child>td {
    border-bottom-width: 0;
}