vue实现简单的购物车功能
2024-08-30 21:27:00
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>购物车</title>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>序号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleReduce(index)" :disabled="item.count===1">-</button>
{{item.count}}
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td> </tr>
</tbody>
</table>
<div>总价：{{totalPrice}}</div>
<!-- <div v-else>购物车为空</div> --> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vue=new Vue({
el:"#app",
data:{
list:[
{
id:1,
name:'iphone 7',
price:6188,
count:1
},
{
id:2,
name:'iphone 8',
price:7188,
count:1
},
{
id:3,
name:'iphone X',
price:8188,
count:1
}],
},
methods:{
handleReduce:function(index){
if(this.list[index].count===1) return;
this.list[index].count--;
},
handleAdd:function(index){
this.list[index].count++;
},
handleRemove:function(index){
this.list.splice(index,1);
}
},
computed:{
totalPrice:function(){
var total=0;
for(var i=0,len=this.list.length;i<len;i++){
total+=this.list[i].price*this.list[i].count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
}
} }); </script>
</html>
最新文章
- 数据库连接池的选择 Druid
- Android：dimen尺寸资源文件的使用
- Surround the Trees---hdu1392（凸包GraHam模板）
- android AlarmManager 详解
- FZU 2219 StarCraft（星际争霸）
- jquery下拉框实现将左边的选项添加到右边区域
- 济南学习 Day1 T3 am
- 一个【wchar_t】引发的学案
- AzCopy – 上传/下载 Windows Azure Blob 文件
- 优秀团队建设--美国式团队(ppt)
- C# 哈希表（Hashtable）用法笔记
- localstorage本地定时缓存
- Spring IOC（三）依赖注入
- Java服务器内存过高&CPU过高问题排查
- altera DDR2 IP核之仿真
- linux服务开机自动启动
- [IOI2014]holiday假期(分治+主席树)
- 02. Pandas 1|数据结构Series、Dataframe
- css CSS常见布局解决方案
- Linux限制普通用户只能使用某命令