Vue.js 学习笔记阶段案例：图书购物车

最新推荐文章于 2022-03-23 22:45:27 发布

stary1993

最新推荐文章于 2022-03-23 22:45:27 发布

阅读量183

点赞数 1

分类专栏： Vue.js 学习笔记文章标签： vue js

本文链接：https://blog.csdn.net/qq_27875933/article/details/115891605

版权

Vue.js 学习笔记专栏收录该内容

54 篇文章 10 订阅

订阅专栏

阶段案例：图书购物车

效果图：

效果说明：

商品价格指定显示格式；

总价随数量增减变动；

总价随着删除变动。

style.css

/*style.css*/
table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例一：图书购物车</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<table>
				<thead>
					<tr>
						<th></th>
						<th>商品名称</th>
						<th>商品价格</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>				
				</thead>
				<tbody>
					<tr v-for="(book, index) in books">
						<td>{{ index + 1 }}</td>
						<td>{{ book.name }}</td>
						<td>{{ book.price | showPrice }}</td>
						<td>
							<button type="button" @click="decrement(index)" :disabled="book.count <= 1">-</button>
							<span> {{ book.count }} </span>
							<button type="button" @click="increment(index)">+</button>
						</td>
						<td>
							<button type="button" @click="removeHandle(index)" >删除</button>
						</td>
					</tr>					
				</tbody>
				<tfoot>
					<tr><td colspan="5" >总价：{{ totalPrice | showPrice}}</td></tr>
				</tfoot>
			</table>
		</div>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

main.js

const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 1,
        name: '《Vue.js权威指南》',
        price: 99.00,
        count: 1
      },
      {
        id: 2,
        name: '《Vue2实践揭秘》',
        price: 79.00,
        count: 1
      },
      {
        id: 3,
        name: '《Vue.js 2.x实践指南》',
        price: 47.60,
        count: 1
      },
    ]
  },
  methods: {
    increment(index) {
      this.books[index].count++
    },
    decrement(index) {
	  this.books[index].count--
			
    },
    removeHandle(index) {
      this.books.splice(index, 1)
    }
  },
  computed: {
    totalPrice() {
      let totalPrice = 0
      for (let i = 0; i < this.books.length; i++) {
        totalPrice += this.books[i].price * this.books[i].count
      }
      return totalPrice

      // for (let i in/of this.books)
      // reduce
    }
  },
  filters: {
    showPrice(price) {
      return '¥ ' + price.toFixed(2)
    }
  }
})

stary1993

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js 学习笔记阶段案例：图书购物车

目录案例一：图书购物车案例一：图书购物车效果图：效果说明：商品价格指定显示格式；总价随数量增减变动；总价随着删除变动。style.css/*style.css*/table { border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0;}th, td { padding: 8px 16px; border: 1px solid #e9e9e9; .
复制链接

扫一扫