vue实现购物车的监听
更新时间：2020年04月20日 09:50:22 作者：loving-cat
这篇文章主要为大家详细介绍了利用vue的监听事件实现一个简单购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
利用vue简单实现购物车的监听，供大家参考，具体内容如下
主要运用的vue的监听，有兴趣的可以看看实现过程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用vue实现对购物车的监听</title>
<script src="../vue.js"></script>
<style type="text/css">
table{
border: 1px solid black;
width: 100%;
text-align: center;
}
th{
height: 50px;
}
th, td{
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="app">
<h1>订单系统</h1>
<table>
<tr>
<th>编号</th>
<th>名称</th>
<th>品牌</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr v-for="val in items">
<td>{{val.id}}</td>
<td>{{val.name}}</td>
<td>{{val.pinpai}}</td>
<td>{{val.price}}</td>
<td>
<!-- 如果count等于0执行v-bind
绑定一个点击事件 -->
<button v-bind:disabled="val.count === 0" @click="val.count-=1">-</button>
{{val.count}}
<button @click="val.count+=1">+</button>
</td>
<td>
<button v-on:click="val.count = 0">移除</button>
</td>
</tr>
</table>
<!-- 调用totalPrice -->
你所需要支付总额为：${{totalPrice()}}
</div>
<script type="text/javascript" charset="UTF-8">
var vm = new Vue({
el:"#app",
data:{
items:[{
id:1,
name:'上衣',
pinpai:'阿迪达斯',
price:100,
count:1
},
{
id:2,
name:'裤子',
pinpai:'安踏',
price:528,
count:1
},
{
id:3,
name:'鞋子',
pinpai:'耐克',
price:999,
count:1
}]
},
methods:{
totalPrice:function(){
var totalPri = 0;
//总价等于数量乘以数量
for(var i=0;i<this.items.length;i++){
totalPri += this.items[i].price*this.items[i].count;
}
return totalPri;
}
}
});
</script>
</body>
</html>
实现效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue3中新增了setup,它的出现是为了解决组件内容庞大后,理解和维护组件变得困难的问题,下面这篇文章主要给大家介绍了关于Vue3使用setup如何定义组件的name属性的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了vue实现侧边栏导航效果，右侧显示对应内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
element的表单校验证件号规则及输入“无”的情况校验通过(示例代码)
这篇文章主要介绍了element的表单校验证件号规则及输入“无”的情况校验通过,使用方法对校验数据进行过滤判断,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2023-11-11
详解Vue ElementUI手动上传excel文件到服务器
这篇文章主要介绍了详解Vue ElementUI手动上传excel文件到服务器，对ElementUI感兴趣的同学，可以参考下2021-05-05
这篇文章主要介绍了加速vue组件渲染之性能优化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了Vue中 axios delete请求参数操作，具有很好的参考价值，希望对大家有所 帮助。一起跟随小编过来看看吧2020-08-08
解决Vue运行项目报错proxy error: could not proxy request
这篇文章主要给大家介绍了关于如何解决Vue运行项目报错proxy error:could not proxy request的相关资料,Proxy Error指的是代理服务器无法正确处理请求的错误,需要的朋友可以参考下2023-08-08
在平时的开发工作中，我们经常使用侦听器帮助我们去观察某个数据的变化然后去执行一段逻辑。在 Vue.js 2.x 中，你可以通过 watch 选项去初始化一个侦听器，称作 watcher。本文将详细为大家介绍一下侦听器的实现原理，需要的可以参考一下2022-04-04
Element中el-table动态合并单元格(span-method方法)
本文主要介绍了Element中el-table动态合并单元格(span-method方法)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了spring-cloud-stream的手动消息确认问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
最新评论