一、效果图
废话不多说先上效果图:
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”)