vue小例子-单位换算-父子组件通信

最新推荐文章于 2024-04-29 21:35:15 发布
最新推荐文章于 2024-04-29 21:35:15 发布
阅读量589 收藏 1
点赞数
分类专栏： vue小实例 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yougcave/article/details/114555970
版权

写了差不多三小时，还好，没出什么大bug,基本实现了单位换算，大问题没有，小问题不管。

和前面的例子一样，直接全部复制保存成html页面，就能打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单位换算</title>
    <style>
        table{
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
        }
    </style>
</head>
<body>

<div id="app">
    <!--
    :dmeter="meter" 把父组件的数据传给子组件
    @inputclickmeter="divclickmeter" 把子组件的数据传给父组件
    -->
    <cpn :dmeter="meter" @inputclickmeter="divclickmeter"
    :dkm="km" @inputclickm="divclickkm"
    :dcm="cm" @inputclickcm="divclickcm"
    :ddm="dm" @inputclickdm="divclickdm"
    :dmm="mm" @inputclickmm="divclickmm"
    :dmicrom="microm" @inputclickmicrom="divclickmicrom"
    :dli="li" @inputclickli="divclickli"
    :dzhang="zhang" @inputclickzhang="divclickzhang"
    :dchi="chi" @inputclickchi="divclickchi"
    :dcun="cun" @inputclickcun="divclickcun"
    :dfen="fen" @inputclickfen="divclickfen"
    :dxiaoli="xiaoli" @inputclickxiaoli="divclickxiaoli"
    :dnauticalmile="nauticalmile" @inputclicknauticalmile="divclicknauticalmile"
    :dmile="mile" @inputclickmile="divclickmile"
    :dyard="yard" @inputclickyard="divclickyard"
    :dinch="inch" @inputclickinch="divclickinch"
    :dfoot="foot" @inputclickfoot="divclickfoot"
    :dfur="fur" @inputclickfur="divclickfur"
    ></cpn>
</div>
<template id="cpn">
    <div>
        <h2>单位换算</h2>
        <table>
            <tr>
                <td>米</td>
                <!--双向绑定输入框的value和inputclickmeter方法-->
                <td><input type="text" :value="dmeter" @input="inputclickmeter"></td>
            </tr>
            <tr>
                <td>千米</td>
                <td><input type="text" :value="dkm" @input="inputclickkm"></td>
            </tr>
            <tr>
                <td>厘米</td>
                <td><input type="text" :value="dcm" @input="inputclickcm"></td>
            </tr>
            <tr>
                <td>分米</td>
                <td><input type="text" :value="ddm" @input="inputclickdm"></td>
            </tr>
            <tr>
                <td>毫米</td>
                <td><input type="text" :value="dmm" @input="inputclickmm"></td>
            </tr>
            <tr>
                <td>微米</td>
                <td><input type="text" :value="dmicrom" @input="inputclickmicrom"></td>
            </tr>
            <tr>
                <td>里</td>
                <td><input type="text" :value="dli" @input="inputclickli"></td>
            </tr>
            <tr>
                <td>丈</td>
                <td><input type="text" :value="dzhang" @input="inputclickzhang"></td>
            </tr>
            <tr>
                <td>尺</td>
                <td><input type="text" :value="dchi" @input="inputclickchi"></td>
            </tr>
            <tr>
                <td>寸</td>
                <td><input type="text" :value="dcun" @input="inputclickcun"></td>
            </tr>
            <tr>
                <td>分</td>
                <td><input type="text" :value="dfen" @input="inputclickfen"></td>
            </tr>
            <tr>
                <td>厘</td>
                <td><input type="text" :value="dxiaoli" @input="inputclickxiaoli"></td>
            </tr>
            <tr>
                <td>海里</td>
                <td><input type="text" :value="dnauticalmile" @input="inputclicknauticalmile"></td>
            </tr>
            <tr>
                <td>英里</td>
                <td><input type="text" :value="dmile" @input="inputclickmile"></td>
            </tr>
            <tr>
                <td>码</td>
                <td><input type="text" :value="dyard" @input="inputclickyard"></td>
            </tr>
            <tr>
                <td>英寸</td>
                <td><input type="text" :value="dinch" @input="inputclickinch"></td>
            </tr>
            <tr>
                <td>英尺</td>
                <td><input type="text" :value="dfoot" @input="inputclickfoot"></td>
            </tr>
            <tr>
                <td>弗隆</td>
                <td><input type="text" :value="dfur" @input="inputclickdfur"></td>
            </tr>
        </table>
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //子组件
    const cpn={
        template:'#cpn',
        //props对应父组件里的data
        props:{
            pmeter:Number,//米
            pkm:Number,//千米
            pcm:Number,//厘米
            pdm:Number,//分米
            pmm:Number,//毫米
            pmicrom:Number,//微米
            pli:Number,//里
            pzhang:Number,//丈
            pchi:Number,//尺
            pcun:Number,//寸
            pfen:Number,//分
            pxiaoli:Number,//厘
            pnauticalmile:Number,//海里
            pmile:Number,//英里
            pyard:Number,//码
            pinch:Number,//英寸
            pfoot:Number,//英尺
            pfur:Number,//弗隆
        },
        data(){
            return{
                //Vue不推荐在子组件里直接更改props里的数据，就多加个data来中转
                //把props里的值赋到这里来，然后更改和显示都用这里的数据
                dmeter:this.pmeter,//米
                dkm:this.pkm,//千分
                dcm:this.pcm,//厘米
                ddm:this.pdm,//分米
                dmm:this.pmm,//毫米
                dmicrom:this.pmicrom,//微米
                dli:this.pli,//里
                dzhang:this.pzhang,//丈
                dchi:this.pchi,//尺
                dcun:this.pcun,//寸
                dfen:this.pfen,//分
                dxiaoli:this.pxiaoli,//厘
                dnauticalmile:this.pnauticalmile,//海里
                dmile:this.pmile,//英里
                dyard:this.pyard,//码
                dinch:this.pinch,//英寸
                dfoot:this.pfoot,//英尺
                dfur:this.pfur,//弗隆
            }
        },
        methods:{
            inputclickmeter(event){
                //把输入框的值赋给dmeter
                this.dmeter=event.target.value;
                //把dmeter通过自定义方法传出到父组件模块
                this.$emit('eventclickmeter',this.dmeter);

                //先把输入框的值转换成meter,然后就可以复制下面的转换，然后复制完了，突然想起这可以搞个方法
                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickkm(event){
                this.dkm=event.target.value;

                this.$emit('eventclickkm',this.dkm);

                this.dmeter=this.dkm*1000;

                this.dkm=this.dmeter/1000;//千
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickcm(event){
                this.dcm=event.target.value;

                this.$emit('eventclickcm',this.dcm);

                this.dmeter=this.dcm/100;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickdm(event){
                this.ddm=event.target.value;
                this.$emit('eventclickdm',this.ddm);

                this.dmeter=this.ddm/10;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickmm(event){
                this.dmm=event.target.value;
                this.$emit('eventclickmm',this.dmm);

                this.dmeter=this.dmm/1000;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickmicrom(event){
                this.dmicrom=event.target.value;
                this.$emit('eventclickmicrom',this.dmicrom);

                this.dmeter=this.dmicrom/1000000;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickli(event){
                this.dli=event.target.value;
                this.$emit('eventclickli',this.dli);

                this.dmeter=this.dli/0.002;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickzhang(event){
                this.dzhang=event.target.value;
                this.$emit('eventclickzhang',this.dzhang);

                this.dmeter=this.dzhang/0.3;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickchi(event){
                this.dchi=event.target.value;
                this.$emit('eventclickchi',this.dchi);

                this.dmeter=this.dchi/3;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickcun(event){
                this.dcun=event.target.value;
                this.$emit('eventclickcun',this.dcun);

                this.dmeter=this.dcun/30;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickfen(event){
                this.dfen=event.target.value;
                this.$emit('eventclickfen',this.dfen);

                this.dmeter=this.dfen/300;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
           },
            inputclickxiaoli(event){
                this.dxiaoli=event.target.value;
                this.$emit('eventclickxiaoli',this.dxiaoli);

                this.dmeter=this.dxiaoli/3000;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclicknauticalmile(event){
                this.dnauticalmile=event.target.value;
                this.$emit('eventclicknauticalmile',this.dnauticalmile);

                this.dmeter=this.dnauticalmile/0.0005399568;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
           },
            inputclickmile(event){
                this.dmile=event.target.value;
                this.$emit('eventclickmile',this.dmile);

                this.dmeter=this.dmile/0.00062137119;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickyard(event){
                this.dyard=event.target.value;
                this.$emit('eventclickyard',this.dyard);

                this.dmeter=this.dyard/1.0936133;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickinch(event){
                this.dinch=event.target.value;
                this.$emit('eventclickinch',this.dinch);

                this.dmeter=this.dinch/39.370079;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickfoot(event){
                this.dfoot=event.target.value;
                this.$emit('eventclickfoot',this.dfoot);

                this.dmeter=this.dfoot/3.2808399;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
            inputclickdfur(event){
                this.dfur=event.target.value;
                this.$emit('eventclickfur',this.dfur);

                this.dmeter=this.dfur/0.0049709695;

                this.dkm=this.dmeter/1000;//千分
                this.dcm=this.dmeter*100;//厘米
                this.ddm=this.dmeter*10;//分米
                this.dmm=this.dmeter*1000;//毫米
                this.dmicrom=this.dmeter*1000000;//微米
                this.dli=this.dmeter*0.002;//里
                this.dzhang=this.dmeter*0.3;//丈
                this.dchi=this.dmeter*3;//尺
                this.dcun=this.dmeter*30;//寸
                this.dfen=this.dmeter*300;//分
                this.dxiaoli=this.dmeter*3000;//厘
                this.dnauticalmile=this.dmeter*0.0005399568;//海里
                this.dmile=this.dmeter*0.00062137119;//英里
                this.dyard=this.dmeter*1.0936133;//码
                this.dinch=this.dmeter*39.370079;//英寸
                this.dfoot=this.dmeter*3.2808399;//英尺
                this.dfur=this.dmeter*0.0049709695;//弗隆
            },
        }
    }
    const app = new Vue({
        el:'#app',
        data:{
            meter:0,//米
            km:0,//千分
            cm:0,//厘米
            dm:0,//分米
            mm:0,//毫米
            microm:0,//微米
            li:0,//里
            zhang:0,//丈
            chi:0,//尺
            cun:0,//寸
            fen:0,//分
            xiaoli:0,//厘
            nauticalmile:0,//海里
            mile:0,//英里
            yard:0,//码
            inch:0,//英寸
            foot:0,//英尺
            fur:0,//弗隆
        },
        methods:{
            //这里是把子组件里的dmeter赋给父组件里的meter,
            divclickmeter(value){
                this.meter=parseFloat(value);
            },
            divclickkm(value){
                this.km=value;
            },
            divclickcm(value){
                this.cm=value;
            },
            divclickdm(value){
                this.dm=value;
            },
            divclickmm(value){
                    this.mm=value;
            },
            divclickmicrom(value){
                this.microm=value;
            },
            divclickli(value){
                this.li=value;
            },
            divclickzhang(value){
                this.zhang=value;
            },
            divclickchi(value){
                this.chi=value;
            },
            divclickcun(value){
                this.cun=value;
            },
            divclickfen(value){
                this.fen=value;
            },
            divclickxiaoli(value){
                this.xiaoli=value;
            },
            divclicknauticalmile(value){
                this.nauticalmile=value;
            },
            divclickmile(value){
                this.mile=value;
            },
            divclickyard(value){
                this.yard=value;
            },
            divclickinch(value){
                this.inch=value;
            },
            divclickfoot(value){
                this.foot=value;
            },
            divclickfur(value){
                this.fur=value;
            },
        },
        components:{
            cpn
        }
    })
    //这完全就是个体力活，CTRL+C了几百次
</script>

</body>
</html>

显示效果

youngcave2
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Idealyard：使用Vue和Flask构造前替代分离的RESTful个人博客
02-05
理想院 使用Vue和Flask构建前原型分离的RESTful个人博客。 关于该项目的部分说明可在此处找到 :backhand_index_pointing_right: ，如果没有找到需要的内容，请邮件或者Issues交流； :warning:注意 该博客仅用于学习原理，前端页面并未实现响应式布局，暂时也没有精力去实现，博客内容也没有时间去打理。日常关于记录的博客主要在之中更新。 如果你是Flask初学者，推荐一本国人书籍给大家《 Flask Web开发实战：入门，进阶与原理解析》，本人也是该书的阅读者与受益者。同时建议多去这个网站看看： 由于服务器过期，本博客暂无演示功能，如果有同学部署上线可以提供演示链接则非常感谢。暂时请点击下方链接观看简单的功能演示。 交
vue的两个案例
qq_46466568的博客
09-29 321
千米和米的转换 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box">
Vue中将以毫米（mm）为单位的数值转换为像素（px）
beyond520lin的博客
07-24 1069
1. 首先，需要确定当前屏幕的像素密度（pixel density）。常见的像素密度是每英寸像素数（PPI）为 96。可以根据实际情况进行调整。所以，在Vue中将毫米转换为像素，可以使用上述公式进行计算。将这个转换过程封装成一个Vue过滤器或者自定义方法，以便在模板中直接调用和使用。在Vue中将以毫米（mm）为单位的数值转换为像素（px），可以使用CSS中的转换函数。
vue将大数字单位转化成 万、亿
weixin_48854245的博客
01-13 3016
//将超过万/亿的数字加上万/亿的单位 getNum() { for (let i of this.paymentDiv) { //math.floor 就是去除小数点向下取整 math.floor(3.84) = 3 //x.toString() 就是把x变成字符串 let num1 = Math.floor(i.today).toString(); //如果num1长度大于4(num1是万级别的) if.
vue单位换算
qq_57218752的博客
09-07 731
玩玩
vue-js实现日期加减，年月日，及单位换算。
CCKing7的博客
12-23 8415
1.点击年份加一 2.点击年份减一 3.点击月份加一 4.点击月份减一 5.点击天数加一 6.点击天数减一
vue自适应单位换算
weixin_42711805的博客
07-22 1086
module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { // 视窗的宽度，对应的是我们设计稿的宽度 viewportWidth: 375, // 指定`px`转换为视窗单位值的小数位数 unitPrecision: 6, // 指定需要转换成的视窗单位，建议使用vw viewportUnit: "vw", /.
vue应用实例 单位换算（简仿百度单位换算网页工具）
dyh111的博客
08-26 2324
一、效果图 废话不多说先上效果图： 1、这是百度的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190826110114230.png) 2、这是我的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190826110241909.png) （好吧，自惭形愧，还是差很多的！） 二、关键代码 1、html <di...
vue+element单位换算，分换算为元
m0_52263688的博客
09-22 1413
有时候我们开发的时候，关联到价钱的数值，我们后端统一返回分为单位的数据。我们需要自己转换下 //分转换成元 conversion = (num: number) => { const str = num / 100 + ""; const intSum = str .substring(0, str.indexOf(".")) .replace(/\B(?=(?:\d{3})+$)/g, ","); //取到整数部分 const dot = str
Vue移动端 / PC端适配解决方案：postcss-px-to-viewport
米斯特曹
08-09 3920
本文介绍一款移动端 / PC端非常不错的适配解决方案：postcss-px-to-viewport 【进入官网】 在此之前为解决适配问题“普遍”会给html根节点设置font-size来计算单位值，兼容多端适配问题。开发者需要实时换算单位、还需要精确到六七位小数点。这样的解决方案在现在看来似乎不是最简洁高效的方案。 希望有这样一种方案： 首先、不论转换是否方便，我就是不想在开发代码的时候换算这些单位，更不想去操心什么转换系数（根节点单位） 我会考虑某些属性不需要转换为REM、VW等，如果统一...
vue-country-flag:国旗的Vue组件
05-01
vue-country-flag 国家标记作为Vue组件 Vue 3支持 从2.0.3版开始，此组件同时支持Vue2和Vue3。 为了将其与Vue 3配合使用，请按如下所示安装vue-country-flag-next软件包： npm install vue-country-flag-next Vue...
vue-signature-pad:ature签名板组件视图
04-28
Vue签名板 Vue组件包装，用于演示版安装$ yarn add vue-signature-pad用法import Vue from 'vue' ;import VueSignaturePad from 'vue-signature-pad' ;Vue . use ( VueSignaturePad ) ; < template> ...
vue.js使用v-model实现父子组件间的双向通信示例
10-15
主要介绍了vue.js使用v-model实现父子组件间的双向通信,结合实例形式分析了vue.js基于v-model父子组件间的双向通信的具体实现技巧,需要的朋友可以参考下
vue-doc-preview:Vue文档预览组件
05-06
vue-doc-preview vue文档预览组件，此组件将在页面上显示文档的内容。 英文自述文件|用进口首先，从yarn或npm添加此程序包。 yarn add vue-doc-previewornpm i vue-doc-preview --save然后，将此组件导入.vue文件。 ...
vue-mini-weather:基于Vue开发的迷你实时天气预报组件
05-14
基于Vue框架开发的一款迷你天气预报展示的小组件，目前只支持中国大陆的天气预报，原因在更新公告中有，有问题请提 :package: 安装 2021.04.24 因为刚上传到npm仓库没多久，可能其他镜像库还没有镜像过去，所以要...
Spring Cloud Gateway直接管理Vue.js的静态资源
wddblog的博客
04-28 618
1. 构建Vue.js应用像之前一样，构建你的Vue.js应用，并将生成的静态资源（位于dist目录）复制到Spring Boot项目的某个目录，比如。
element-ui的bug记录
最新发布
nick_zhang的博客
04-29 424
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 507
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
vue2编写主体页面
5年编程经验的老猿。
04-28 415
这个示例展示了一个基本的主体页面布局，其中包含了侧边栏、导航栏和主要内容区域。Element UI的el-container、el-aside、el-header和el-main组件被用来创建布局的不同部分，而el-menu和el-submenu组件则用来创建侧边栏的导航菜单
VUE2v-model父子组件通信
03-06
在Vue2中，v-model是一种用于实现父子组件通信的指令。它可以将父组件的数据传递给子组件，并且在子组件中修改后可以将修改后的值传递回父组件。 具体使用v-model进行父子组件通信的步骤如下： 1. 在父组件中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

youngcave2

等待第一笔打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值