目录
实验内容
购物车功能的拓展（商品数量的变化、总价变化），点击数量+、-按钮实现数量的变化，同时其总价和合计金额发生改变。
实验流程
先创建一个table，把所需要的信息填进去，在数量那一列设立两个按钮，通过操控按钮可以改变商品的总价及合计。
实验源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车功能拓展</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="shop">
<template id="myshop">
<table border="1">
<tr>
<td>名称</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
</tr>
<tr v-for="(item,index) in goods" :key="item.name">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="min(item)" :disabled="item.count <= 0">-</button>
{{item.count}}
<button @click="plu(item)">+</button>
</td>
<td>{{item.price*item.count}}</td>
</tr>
<tr >
<td colspan="4"> 合计：{{getTotal}}</td>
</tr>
</table>
</template>
</div>
<script type="text/javascript">
var demo = new Vue({
el:'#myshop',
data:{
goods:[
{
name:'小米手机',
price:1300,
count:0,
},
{
name:'小米手腕',
price:310,
count:0,
},
]
},
computed: {
getTotal(){
let total=0;
this.goods.map((item,index)=>{
total += item.price * item.count;
})
return total;
},
},
methods: {
plu:function(item){
item.count++;
},
min:function(item){
item.count--;
},
},
})
</script>
</body>
</html>
实验结论
1149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
