Калькулятор размера арматуры на vue.js
скрипт не работает никак не могу понять в html патключаю vue js но ничево
var calc = new Vue({
el: '#calc',
data: {
selected: '6',
kilo: 1,
metr: 0.617,
focus: 'kg', // Определяет элемент который изменяем
},
methods: {
focusKg: function() {
this.focus = 'kg'
},
focusMetr: function() {
this.focus = 'metr'
},
calcKilo: function() {
if (this.focus == 'metr') {
var selected = +this.selected // Приводим строку к числу
this.kilo = Number((this.metr * armatura[selected]).toFixed(3)) // Вычисляем, округляем до 3 знаков после точки и убираем незначащие нули
}
},
cakcMetr: function() {
if (this.focus == 'kg') {
var selected = +this.selected // Приводим строку к числу
this.metr = Number((this.kilo / armatura[selected]).toFixed(3)) // Вычисляем, округляем до 3 знаков после точки и убираем незначащие нули
}
}
},
watch: {
kilo: function() {
this.cakcMetr()
},
metr: function() {
this.calcKilo()
},
selected: function() {
this.calcKilo()
this.cakcMetr()
}
}
})
// 'Диматер арматуры' => 'пропорция'
// Для вычисления массы в кг нужно умножить на пропорцию
// Для вычисления длины в метрах нужно разделить на пропорцию
var armatura = {
6: 0.222,
8: 0.395,
10: 0.617,
12: 0.888,
14: 1.21,
16: 1.58,
18: 2,
20: 2.47,
22: 2.98,
25: 3.85,
28: 4.83,
32: 6.31,
36: 7.99,
40: 9.87,
41:10.364,
42 : 10.364 ,
43 : 10.876 ,
44 : 11.4 ,
45 : 11.936,
46 : 12.485,
47 : 13.046 ,
48 : 13.619,
49 : 14.205,
50 : 15.413,
52 : 16.671,
53 : 17.319,
54 : 17.78,
55 : 18.65,
56 : 19.335,
58 : 20.74,
60 : 22.195,
62 : 23.7,
63 : 24.47,
65 : 26.049,
67 : 27.676,
68 : 28.509,
70 : 30.21,
72 : 31.961,
75 : 34.68,
78 : 37.51,
80 : 39.458,
82 : 41.456,
85 : 44.545,
87 : 46.666,
90 : 49.94,
92 : 52.184,
95 : 55.643,
97 : 58.01,
100 : 61.654
]}
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.problems-calc {
align-self: flex-start;
display: flex;
flex-direction: column;
max-width: 388px;
width: 100%;
}
.problems-calc__title {
margin-top: 0px;
font-size: 20px;
font-weight: 400;
margin-bottom: 25px;
color: #fff;
}
.calc-inputs {
margin-top: 20px;
width: 100%;
display: flex;
justify-content: space-between;
color: #fff;
}
.calc-kg,
.calc-metr {
display: flex;
flex-direction: column;
max-width: 184px;
width: 100%;
}
.calc-kg input,
.calc-metr input {
font-size: 15px;
padding: 11px 15px;
border-radius: 5px;
background-color: #F0F0F0;
border: 1px solid rgba(0, 0, 0, 0.22);
}
.calc-diam {
font-size: 15px;
padding: 11px 15px;
border-radius: 5px;
background-color: #F0F0F0;
border: 1px solid rgba(0, 0, 0, 0.22);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="problems-calc" id="calc">
<h4 class="problems-calc__title text-center">Воспользуйтесь калькулятором</h4>
<select v-model="selected" name="diam" id="diam" class="calc-diam">
<option selected disabled hidden>Выберите диаметр</option>
<option value="6">6 мм</option>
<option value="8">8 мм</option>
<option value="10">10 мм</option>
<option value="12">12 мм</option>
<option value="14">14 мм</option>
<option value="16">16 мм</option>
<option value="18">18 мм</option>
<option value="20">20 мм</option>
<option value="22">22 мм</option>
<option value="25">25 мм</option>
<option value="28">28 мм</option>
<option value="32">32 мм</option>
<option value="36">36 мм</option>
<option value="40">40 мм</option>
<option value="41">41 მ</option>
<option value="41">41 მ</option>
<option value="42 ">42 მ</option>
<option value="43 ">43 მ</option>
<option value="44 ">44 მ</option>
<option value="45 ">45 მ</option>
<option value="46 ">46 მ</option>
<option value="47 ">47 მ</option>
<option value="48 ">48 მ</option>
<option value="49 ">49 მ</option>
<option value="50 ">50 მ</option>
<option value="52 ">52 მ</option>
<option value="53 ">53 მ</option>
<option value="54 ">54 მ</option>
<option value="55 ">55 მ</option>
<option value="56 ">56 მ</option>
<option value="58 ">58 მ</option>
<option value="60 ">60 მ</option>
<option value="62 ">62 მ</option>
<option value="63 ">63 მ</option>
<option value="65 ">65 მ</option>
<option value="67 ">67 მ</option>
<option value="68 ">68 მ</option>
<option value="70 ">70 მ</option>
<option value="72 ">72 მ</option>
<option value="75 ">75 მ</option>
<option value="78 ">78 მ</option>
<option value="80 ">80 მ</option>
<option value="82 ">82 მ</option>
<option value="85 ">85 მ</option>
<option value="87 ">87 მ</option>
<option value="90 ">90 მ</option>
<option value="92 ">92 მ</option>
<option value="95">95 მ</option>
<option value="97 ">97 მ</option>
<option value="100">100 მ</option>
</select>
<div class="calc-inputs">
<div class="calc-kg">
<span>Килограммы:</span>
<input @focus="focusKg" v-model="kilo" type="number">
</div>
<div class="calc-metr">
<span>Метры:</span>
<input @focus="focusMetr" v-model="metr" type="number">
</div>
</div>
</div>
Ответы (1 шт):
Автор решения: Denis640Kb
→ Ссылка
Вот работающее решение(протестировано):
var calc = new Vue({
el: '#calc',
data: {
selected: '6',
kilo: 1,
metr: 0.617,
focus: 'kg', // Определяет элемент который изменяем
},
methods: {
focusKg: function() {
this.focus = 'kg'
},
focusMetr: function() {
this.focus = 'metr'
},
calcKilo: function() {
if (this.focus == 'metr') {
var selected = +this.selected // Приводим строку к числу
this.kilo = Number((this.metr * armatura[selected]).toFixed(3)) // Вычисляем, округляем до 3 знаков после точки и убираем незначащие нули
}
},
cakcMetr: function() {
if (this.focus == 'kg') {
var selected = +this.selected // Приводим строку к числу
this.metr = Number((this.kilo / armatura[selected]).toFixed(3)) // Вычисляем, округляем до 3 знаков после точки и убираем незначащие нули
}
}
},
watch: {
kilo: function() {
this.cakcMetr()
},
metr: function() {
this.calcKilo()
},
selected: function() {
this.calcKilo();
this.cakcMetr()
}
}
});
// 'Диматер арматуры' => 'пропорция'
// Для вычисления массы в кг нужно умножить на пропорцию
// Для вычисления длины в метрах нужно разделить на пропорцию
var armatura = {
6: 0.222,
8: 0.395,
10: 0.617,
12: 0.888,
14: 1.21,
16: 1.58,
18: 2,
20: 2.47,
22: 2.98,
25: 3.85,
28: 4.83,
32: 6.31,
36: 7.99,
40: 9.87,
41:10.364,
42 : 10.364 ,
43 : 10.876 ,
44 : 11.4 ,
45 : 11.936,
46 : 12.485,
47 : 13.046 ,
48 : 13.619,
49 : 14.205,
50 : 15.413,
52 : 16.671,
53 : 17.319,
54 : 17.78,
55 : 18.65,
56 : 19.335,
58 : 20.74,
60 : 22.195,
62 : 23.7,
63 : 24.47,
65 : 26.049,
67 : 27.676,
68 : 28.509,
70 : 30.21,
72 : 31.961,
75 : 34.68,
78 : 37.51,
80 : 39.458,
82 : 41.456,
85 : 44.545,
87 : 46.666,
90 : 49.94,
92 : 52.184,
95 : 55.643,
97 : 58.01,
100 : 61.654
}
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.problems-calc {
align-self: flex-start;
display: flex;
flex-direction: column;
max-width: 388px;
width: 100%;
}
.problems-calc__title {
margin-top: 0px;
font-size: 20px;
font-weight: 400;
margin-bottom: 25px;
color: #fff;
}
.calc-inputs {
margin-top: 20px;
width: 100%;
display: flex;
justify-content: space-between;
color: #fff;
}
.calc-kg,
.calc-metr {
display: flex;
flex-direction: column;
max-width: 184px;
width: 100%;
}
.calc-kg input,
.calc-metr input {
font-size: 15px;
padding: 11px 15px;
border-radius: 5px;
background-color: #F0F0F0;
border: 1px solid rgba(0, 0, 0, 0.22);
}
.calc-diam {
font-size: 15px;
padding: 11px 15px;
border-radius: 5px;
background-color: #F0F0F0;
border: 1px solid rgba(0, 0, 0, 0.22);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="problems-calc" id="calc">
<h4 class="problems-calc__title text-center">Воспользуйтесь калькулятором</h4>
<select v-model="selected" name="diam" id="diam" class="calc-diam">
<option selected disabled hidden>Выберите диаметр</option>
<option value="6">6 мм</option>
<option value="8">8 мм</option>
<option value="10">10 мм</option>
<option value="12">12 мм</option>
<option value="14">14 мм</option>
<option value="16">16 мм</option>
<option value="18">18 мм</option>
<option value="20">20 мм</option>
<option value="22">22 мм</option>
<option value="25">25 мм</option>
<option value="28">28 мм</option>
<option value="32">32 мм</option>
<option value="36">36 мм</option>
<option value="40">40 мм</option>
<option value="41">41 მ</option>
<option value="41">41 მ</option>
<option value="42 ">42 მ</option>
<option value="43 ">43 მ</option>
<option value="44 ">44 მ</option>
<option value="45 ">45 მ</option>
<option value="46 ">46 მ</option>
<option value="47 ">47 მ</option>
<option value="48 ">48 მ</option>
<option value="49 ">49 მ</option>
<option value="50 ">50 მ</option>
<option value="52 ">52 მ</option>
<option value="53 ">53 მ</option>
<option value="54 ">54 მ</option>
<option value="55 ">55 მ</option>
<option value="56 ">56 მ</option>
<option value="58 ">58 მ</option>
<option value="60 ">60 მ</option>
<option value="62 ">62 მ</option>
<option value="63 ">63 მ</option>
<option value="65 ">65 მ</option>
<option value="67 ">67 მ</option>
<option value="68 ">68 მ</option>
<option value="70 ">70 მ</option>
<option value="72 ">72 მ</option>
<option value="75 ">75 მ</option>
<option value="78 ">78 მ</option>
<option value="80 ">80 მ</option>
<option value="82 ">82 მ</option>
<option value="85 ">85 მ</option>
<option value="87 ">87 მ</option>
<option value="90 ">90 მ</option>
<option value="92 ">92 მ</option>
<option value="95">95 მ</option>
<option value="97 ">97 მ</option>
<option value="100">100 მ</option>
</select>
<div class="calc-inputs">
<div class="calc-kg">
<span>Килограммы:</span>
<input @focus="focusKg" v-model="kilo" type="number">
</div>
<div class="calc-metr">
<span>Метры:</span>
<input @focus="focusMetr" v-model="metr" type="number">
</div>
</div>
</div>