问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue 怎么实现点击按钮,使文本框里的值小数点后面的值进行变化

头像
燕子am
    13133373

    问题：vue 怎么实现点击加号或者减号按钮,使文本框里的值小数点后面的值进行相应的加或者减呢

    例子：
    如果没有带有小数点的话，值是1时，点击加号后是2，如果带有小数点的话，1.2点击加号得1.3

    问题是，你并不知道小数点后面的值是多少位，，这个还要做判断

    效果图：

    clipboard.png

    相关代码
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
    <div class="box">
        <button @click="reduceClick">减</button>
        <input type="number" v-model="price" />
        <button @click="increaseClick">加</button>
    </div>
</body>

    </html>
    <script type="text/javascript">

    var    vm = new Vue({
    el:".box",
    data:{
        price:1.343435,
    },
    methods:{
        reduceClick(){//减--点击
            if(this.price > 1){
                this.price--;
            }
        },
        increaseClick(){//加--点击
            this.price++;
        },
    }
});

    </script>

    vue.js
    阅读 3k
    2 个回答
    得票最新
    头像
    linong
      29.2k1367137

      问题出现在了js上。比如经典问题.1+.2=?。

      更新时间 2019年5月20日11:31:54
      我理解错了啊。那没办法了。只能按位处理咯。

      解决方案

      1. 如常见的大数运算的方案。
      2. 转成字符串按位处理
      3. 分开整数和小数部分

      我用方案3
      https://codepen.io/linong/pen...

      头像
      a2774206
        1.8k42853

        提供下我的思路:

        let y = "0.050";
let i = +(y).toString().split('.')[1];//几位小数,先转number再tostring,解决尾数0的小数;
Math.pow(10,-i) // 0.01

        最后要解决js小数计算缺陷:

        function floatCount(options){
        let args,oper,result;
        //把传参转为数组
        args = Array.prototype.slice.apply(arguments);
        //把其中一个参数转为整数，多少位小数转为多少次幂
        oper = Math.pow(10,args[0].toString().length);
        //三个参数，var1:args[0],var2:args[1],运算符：args[2]
        result = eval("("+args[0]+"*"+ oper+''+args[2]+''+args[1] +'*'+ oper+")" +'/'+ oper);
        return result;
   }
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题