VUE购物车总价计算

 html代码块

<div id="app">
			<div class="text1">
				<span>id</span>
				<span>书籍名称</span>
				<span>出版日期</span>
				<span>购买价格($)</span>
				<span>数量</span>
				<span>操作</span>
			</div>
			
			<div class="list" v-for="(item,index) in users" :key="item.id">
				<span>{{item.id}}</span>
				<span>{{item.book}}</span>
				<span>{{item.day}}</span>
				<span>{{item.money}}</span>
				<span><button type="button" @click="jian(item)" >-</button>
				<b>{{item.num}}</b>
				<button type="button" @click="add(item)" >+</button></span>
				<span><button type="button" @click="delItem(item)">移除</button></span>
			</div>
			<p>总价：<b>{{sum}}</b></p>
		</div>

css代码块（自己根据内容修改）

#app{
				width: 800px;
				height: 400px;
				margin: 0 auto;
				text-align: center;
				border: 1px solid  #CCCCCC;
				
			}
			.text1{
				margin-top: 50px;
			}
			span{
				display: inline-block;
				width: 100px;
				text-align: center;
				margin-top: 5px;
			}
			input{
				
				width: 30px;
			}
			b{
				display: inline-block;
				width: 20px;
			}

js代码块(运用vue遍历更快)

<script type="text/javascript">
			new Vue({
				el:"#app",  
				data:{
					users:[
						{
							"id":1,
							"book":"小绿书",
							"day":"2002-9",
							"money":100,
							"num":1,
						},
						{
							"id":2,
							"book":"小红书",
							"day":"2016-9",
							"money":16700,
							"num":1,
						},
						{
							"id":3,
							"book":"发生的书",
							"day":"2026-9",
							"money":600,
							"num":1,
						},
						{
							"id":4,
							"book":"奥古斯丁",
							"day":"2004-9",
							"money":3455,
							"num":1,
						},
						{
							"id":5,
							"book":"发手动阀",
							"day":"2046-9",
							"money":7983,
							"num":1,
						},
					],
					
				},
				methods:{
					add(item){
						item.num+=2
					},
					jian(item){
						if(item.num>1){
							item.num--
						}	
					},
					
					delItem(item){
						
						var ind = this.users.findIndex(value=>value===item);
						this.users.splice(ind,1);
					}
				},
				
				computed:{
					sum(){
						var totalPrice = 0;  //临时单价
						this.users.forEach(function(val){
							totalPrice+=val.money*val.num;	
						});
						return totalPrice;
					}
					
				}
			})
		</script>