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

谁借莪１个温暖的怀抱￠ 2022-02-23 07:56 429阅读 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 条评论，429人围观）

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

相关阅读

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

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

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

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

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

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

相关 Vue解决双向绑定引起数据同步变化的问题

起因是创建Modal编辑Table中的某个条目，Modal的数据直接引用对应TableData索引处的值，当我在Modal中修改数据时，神奇的是Table里的数据也跟着变了，关

缺乏、安全感/ 2023年09月28日 16:13/ 0 赞/ 29 阅读

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

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

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

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

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

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

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

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

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

相关 eclipse tomcat变化同步

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

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

相关 html jquery 数量范围选择（可用于薪资范围，价格范围）

<form class="layui-form"> <div class="form-row"> <div class

约定不等于承诺〃/ 2022年03月20日 12:38/ 0 赞/ 250 阅读

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

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

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

相关 Vue实现商品价格筛选

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

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