Input输入框输入前两个,自动生成第三个数据

最新推荐文章于 2023-08-21 15:47:18 发布

原创最新推荐文章于 2023-08-21 15:47:18 发布 · 2.6k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #javascript #html

前端专栏收录该内容

9 篇文章

订阅专栏

一、需求说明

我们现在有这样一个需求 , 一共三个输入框 , 第一个输入框是分子 , 第二个输入框是 分
母, 最后一个输入框是百分比 , 另外百分比是一个小数, 我们只保留两位小数 , 那么如何实现呢 ?

二、实现思路 :

我这里使用的Vue 以及elementUI 组件, 所以输入框中的数据都在v-model中, 
当我们输入前两个值的时候,我们就可以获取前两个值 , 
然后我们对他们判断,如果这两个值不为空的话,我们就可以将这两个值相除得结果赋值给第三个就行
另外需要保留两位小数,我们使用.toFixed(2); 就是保留的两位小数 , 返回一个变量 , 我们将这个变量赋值给
第三个输入框的v-model , 这样整个功能就实现了 !

三、代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo样本页</title>

    <script src="js/vue.js"></script>
    <script src="js/elementUi.js"></script>
    <link rel="stylesheet" href="css/elementUi.css">
</head>
<body>
<div id="one">
   第一个值 <el-input v-model="value_one" style="width:300px"   @change="change"></el-input>
    <br>
    第二个值 <el-input v-model="value_two" style="width:300px"  @change="change"></el-input>
    <br>
    第三个值 <el-input v-model="value_three" style="width:300px" @change="change" >

    </el-input>
</div>
</body>
<script>
    new Vue({
        el:"#one",
        data:{
            value_one:'',
            value_two:'',
            value_three:'',
        },
        methods:{
            change:function () {
                let that=this;
                if(that.value_one!=''&that.value_two!=''){
                    that.value_three=(that.value_one/that.value_two)*100;
                     let s = that.value_three.toFixed(2);
                     that.value_three=s;

                }


            }
        },

    });
</script>
</html>