Vue实现计算商品总价简单案例

最新推荐文章于 2023-12-12 20:05:23 发布

fengF.

最新推荐文章于 2023-12-12 20:05:23 发布

阅读量8.4k

点赞数 11

分类专栏：经验 vue 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq_44759859/article/details/120040631

版权

这是一个关于Vue的实践案例，通过Vue的指令和计算属性实现商品总价的动态计算。案例中包含商品数量增减（限制最小值为1）、删除操作以及总价实时更新功能。当所有商品被删除后，会显示相应提示。核心技术包括Vue的v-bind、v-on、计算属性以及JavaScript的map()和splice()方法。

摘要由CSDN通过智能技术生成

计算商品总价简单案例-Vue

练习vue的指令和计算属性的一个小案例。

83eeae182638431193b5bfe73607271f.png)
主要效果：

数量增加和减少，小于1不可操作
删除操作
任何加、减、删除操作都会更新总价
商品全删除后显示提示

代码：

<body>
    <div id="app"></div>
    <template id="myapp">
        <table border="1" v-show="isShow">
            <tr>
                <th>序号</th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>数量</th>