Vue简明实用教程(10)——Vue综合练习(购物车)
Posted 谷哥的小弟
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue简明实用教程(10)——Vue综合练习(购物车)相关的知识，希望对你有一定的参考价值。
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
页面展示
页面编码
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue综合练习——购物车</title>
<!-- 引入vue -->
<script src="js/vue.js"></script>
<script type="text/javascript">
// 入口函数
window.onload = function ()
new Vue(
el: "#div1",
data:
// 保存新的商品
good:,
// 保存所有商品的数组
goodArray:[
id:1,name:"牙膏",price:5,count:1,
id:2,name:"水杯",price:10,count:1,
id:3,name:"毛巾",price:4.5,count:1,
]
,
methods:
// 添加商品
addGood()
if(!this.good.id)
alert('请输入正确的编号');
return false;
if(!this.good.name)
alert('请输入正确的名称');
return false;
if(!this.good.price || this.good.price<0)
alert('请输入正确的价格');
return false;
if(!this.good.count || this.good.count<0)
alert('请输入正确的数量');
return false;
// 将商品添加至商品数组
this.goodArray.push(this.good);
// 将商品对象置为空
this.good =;
,
// 增加商品数量
incrementCount(index)
this.goodArray[index].count++;
,
// 减少商品数量
decrementCount(index)
if(this.goodArray[index].count>0)
this.goodArray[index].count--;
else
alert('商品数量不可为负数');
return false;
,
// 计算所有商品总价
getTotalPrice()
let totalPrice = 0;
for (let i = 0; i < this.goodArray.length; i++)
totalPrice += this.goodArray[i].count * this.goodArray[i].price;
// 总价保留两位小数
return totalPrice.toFixed(2);
);
</script>
</head>
<body>
<h2 style="color: red;">本文作者：谷哥的小弟</h2>
<h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<div id="div1">
<!--新增商品至购物车 -->
编号: <input type="text" v-model="good.id"><br/><br/>
名称: <input type="text" v-model="good.name"><br/><br/>
价格: <input type="text" v-model="good.price"><br/><br/>
数量: <input type="text" v-model="good.count"><br/><br/>
<button @click="addGood">添加商品</button>
<br/>
<br/>
<!--利用表格显示所有商品 -->
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>编 号</th>
<th>名 称</th>
<th>价 格</th>
<th>数 量</th>
<th>小 计</th>
</tr>
<!--利用v-for变量商品数组并用表格显示所有商品 -->
<tr v-for="(good,index) in goodArray" v-bind:key="good.id">
<td>good.id</td>
<td>good.name</td>
<td>good.price</td>
<td><input type="button" value="+" @click="incrementCount(index)"> good.count <input type="button" @click="decrementCount(index)" value="-"></td>
<!--小计保留两位小数-->
<td>(good.count * good.price).toFixed(2)</td>
</tr>
</table>
<!--显示所有商品的总价 -->
<h3 style="color: red;">购物车所有商品的总价格为: getTotalPrice() </h3>
</div>
</body>
</html>
以上是关于Vue简明实用教程(10)——Vue综合练习(购物车)的主要内容，如果未能解决你的问题，请参考以下文章