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

最新推荐文章于 2023-07-24 16:49:25 发布

youngcave2

最新推荐文章于 2023-07-24 16:49:25 发布

阅读量640

点赞数

分类专栏： vue小实例文章标签： vue vue.js

本文链接：https://blog.csdn.net/yougcave/article/details/114555970

版权

这是一个使用Vue.js编写的HTML页面，实现了多种长度单位之间的相互换算。用户可以直接输入数值，页面会实时更新所有单位的转换结果，包括米、千米、厘米、分米、毫米、微米、里、丈、尺、寸、分、厘、海里、英里、码、英寸、英尺、弗隆等。

摘要由CSDN通过智能技术生成

写了差不多三小时，还好，没出什么大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>
                &l