vue应用实例 单位换算（简仿百度单位换算网页工具）

一、效果图

废话不多说先上效果图：
1、这是百度的

2、这是我的

（好吧，自惭形愧，还是差很多的！）

二、关键代码

1、html
（补充：页内导航不能使用 标签，否则会刷新全页，其中痛苦唯有自知）

<div id="main">
        <nav>||
            <div  v-on:click="makeActive('length')">长度</div>||
            <div  v-on:click="makeActive('area')">面积</div>||
            <div  v-on:click="makeActive('volume')">体积</div>||
            <div  v-on:click="makeActive('quality')">质量</div>||
            <!-- <div  v-on:click="makeActive('temperature')">温度</div>|| -->
            <div  v-on:click="makeActive('pressure')">压力</div>||
            <div  v-on:click="makeActive('power')">功率</div>||
        </nav>
        <div style="width: 350px; height: 50px;">
            <input v-model="input">
            <select size="1" style="width:80px;font-size:15px;margin-top: 10px;" v-model="first_unit">
                <option v-for="item in array">{{item.unit1}}</option>
            </select>
            <select size="1" style="width:80px;font-size:15px" v-model="second_unit">
                <option v-for="item in array">{{item.unit1}}</option>               
            </select>
        </div>
        <div style="width: 350px; height: 200px; font-size: 24px;text-align:center;">
            
            <p>{{input}}{{first_unit}} = {{conversion()}}{{second_unit}}</p>
            
        </div>
    </div>

2、js
array为当前工作数组，makeactive为导航函数，conversion为计算函数

new Vue({
            // DOM 元素，挂载视图模型
            el: '#main',

            // 定义属性，并设置初始值
            data: {
                // active: "",
                input: 0,
                first_unit: "m",
                second_unit: "m",
                length: [{
                        "unit1": "km",
                        "unit2": "m",
                        "rate": 1000
                    },
                    {
                        "unit1": "m",
                        "unit2": "m",
                        "rate": 1
                    },
                    {
                        "unit1": "dm",
                        "unit2": "m",
                        "rate": 0.1
                    },
                    {
                        "unit1": "cm",
                        "unit2": "m",
                        "rate": 0.01
                    },
                    {
                        "unit1": "mm",
                        "unit2": "m",
                        "rate": 0.001
                    },
                    {
                        "unit1": "um",
                        "unit2": "m",
                        "rate": 0.000001
                    },
                    {
                        "unit1": "nm",
                        "unit2": "m",
                        "rate": 0.000000001
                    }
                ],
                area: [],
                volume: [],
                quality: [],
                temperature: [],
                pressure: [],
                power: [],
                array: [{
                        "unit1": "km",
                        "unit2": "m",
                        "rate": 1000
                    },
                    {
                        "unit1": "m",
                        "unit2": "m",
                        "rate": 1
                    },
                    {
                        "unit1": "dm",
                        "unit2": "m",
                        "rate": 0.1
                    },
                    {
                        "unit1": "cm",
                        "unit2": "m",
                        "rate": 0.01
                    },
                    {
                        "unit1": "mm",
                        "unit2": "m",
                        "rate": 0.001
                    },
                    {
                        "unit1": "um",
                        "unit2": "m",
                        "rate": 0.000001
                    },
                    {
                        "unit1": "nm",
                        "unit2": "m",
                        "rate": 0.000000001
                    }
                ] 
                //点击菜单使用的函数

            },
            methods:{
                makeActive(item) {
                    // 模型改变，视图会自动更新
                    // this.active = item;
                    switch (item) {
                        case "length":
                            this.array = this.length;
                            break;
                        case "area":
                            this.array = this.area;
                            break;
                        case "volume":
                            this.array = this.volume;
                            break;
                        case "quality":
                            this.array = this.quality;
                            break;
                        case "temperature":
                            this.array = this.temperature;
                            break;
                        case "pressure":
                            this.array = this.pressure;
                            break;
                        case "power":
                            this.array = this.power;
                            break;
                            }
                    this.first_unit = this.array[0].unit2;
                    this.second_unit = this.array[0].unit2;

                },
                conversion() {
                    var arrayList = this.array;
                    var a = this.first_unit;
                    var b = this.second_unit;
                    
                    var item1 = arrayList.filter(function(item) {
                        if (item.unit1 === a) {
                            return item;
                        }
                    });

                    var item2 = arrayList.filter(function(item) {
                        if (item.unit1 === b) {
                            return item;
                        }
                    });

                    return this.input * item1[0].rate / item2[0].rate;
                },
            }
        });

（除length外，其他几个数组数据为节省空间没放！需要请下载完整项目“https://download.csdn.net/download/dyh111/11614276”）