vue 实现数量和价格同步变化

谁借莪１个温暖的怀抱￠ 2022-02-23 07:56 376阅读 0赞

***效果如下***

![2019040714020837.gif][]

--------------------

*涉及框架*

1、vue.js

2、bootstrap框架

--------------------

***实现功能的代码如下***

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8"> 
    	<title>Bootstrap 实例 - 按钮组的大小</title>
    	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="btn-group btn-group-sm" id='app'>
    
    	<button type="button" class="btn btn-default" @click = "counter--"  v-if="counter>0">-</button>
    	<button type="button" class="btn btn-default"> {
       { counter }}</button>
    	<button type="button" class="btn btn-default" @click = "counter++">+</button>
    <button type="button" class="btn btn-primary">￥{
       { counter*dj }}</button>
    	</div>
    
    <script type = "text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            counter: 1,
    		dj:25
        }
    });
    </script>
    </body>
    </html>

[2019040714020837.gif]: /images/20220223/78b1d0e19ca54334a95eee67569b9edb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，376人围观）

还没有评论，来说两句吧...

相关阅读

相关 UNIAPP实战项目笔记36 购物车的编辑商品数量完成的功能和数量价格计算

UNIAPP实战项目笔记36 购物车的编辑商品数量完成的功能和数量价格计算通过template标签,和uniNumberBox组件实现此功能在 shopc

Bertha 。/ 2024年04月01日 15:28/ 0 赞/ 47 阅读

相关 UNIAPP实战项目笔记35 购物车的价格合计和结算数量

UNIAPP实战项目笔记35 购物车的价格合计和结算数量通过mapGetters,mapMutations实现此功能在 shopcart.vue中使用,具体

缺乏、安全感/ 2024年04月01日 15:14/ 0 赞/ 50 阅读

相关 vue中使用async和await来实现同步和异步

[https://www.cnblogs.com/robinunix/articles/10900474.html][https_www.cnblogs.com_robinun

偏执的太偏执、/ 2023年01月11日 09:17/ 0 赞/ 110 阅读

相关对比显示每条线路的价格和该类型线路的平均价格，分别使用子查询和 exists 获取线路数量

[查看本章节][Link 1] [查看作业目录][Link 2] -------------------- 需求说明：对比显示每条线路的价格和该类型线路的

我就是我/ 2022年12月28日 01:31/ 0 赞/ 128 阅读

相关 Vue--路由变化

原文网址：[Vue--路由变化\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址简介 vue路由变化时不会向后端发起请求。 v

ゝ一世哀愁。/ 2022年08月31日 12:27/ 0 赞/ 180 阅读

相关 unity 背景根据按钮数量变化

![父物体][d40ffd41c2531cd3c9fae7d71b019220.png] ![背景][ea843314639ee7d859cffb7c2f620071.pn

╰+哭是因爲堅強的太久メ/ 2022年06月05日 12:52/ 0 赞/ 147 阅读

相关 eclipse tomcat变化同步

workspace内web项目修改了，可能在tomcat启动的项目那里没改，需保持同步 publish：发布 workspace内web项目同步到tomcat启动的项目那里

雨点打透心脏的1/2处/ 2022年04月08日 15:16/ 0 赞/ 171 阅读

相关 vue 实现数量和价格同步变化

效果如下 ![2019040714020837.gif][] -------------------- 涉及框架 1、vue.js 2、bootstrap框架

谁借莪１个温暖的怀抱￠/ 2022年02月23日 07:56/ 0 赞/ 377 阅读

相关 vue 监听屏幕变化

1、防抖 npm install lodash.debounce -save-dev 2、在main.js写上如下代码 const windowResiz

偏执的太偏执、/ 2021年10月19日 07:54/ 0 赞/ 460 阅读

相关 Vue实现商品价格筛选

当我们遇到电商项目的时候面对不同价格的时候就需要我把 10 块到20块的商品给单独的筛选出来页面展示的不同的价格间的商品 ![在这里插入图片描述][waterm

系统管理员/ 2021年07月24日 20:49/ 0 赞/ 666 阅读