Калькулятор сечения трубы

by Владимир Коротенко

HTML

<div id="app">
  <h2>Площадь трубы</h2>
  <br />
  <div class="row">
    <label for="d">Диаметр: </label>
    <input id='d' v-model='d'>
    <span>мм</span>
  </div>
  <div class="row">
    <label for="h">Толщина стенки: </label>
    <input id='h' v-model='h'>
    <span>мм</span>
  </div>
  <div class="row">
    <label for="len">Длина окружности: </label>
    <div>{{ getlen.toFixed(3) }}</div>
    <span>мм</span>
  </div>
  <div class="row">
    <label for="len">Сечение: </label>
    <div>{{ getsquare.toFixed(3) }}</div>
    <span>мм2</span>
  </div>
  <div class="row">
    <label for="len">Вес погонный метр: </label>
    <div>{{ getmass.toFixed(3) }}</div>
    <span>кг</span>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.row {
  display: flex;
  padding: 5px;
}

.row label {
  width: 180px;
}

.row span {
  display: inline-block;
  padding-left: 0.5em;
}

.row div,
.row input {
  width: 180px;
}

Vue

new Vue({
  el: "#app",
  data: {
    d: 20,
    h: 2,
  },
  computed:{
     getlen: function(){
         return this.d * Math.PI;
     },
     getsquare: function(){
      var dv = this.d - this.h * 2;      
      var dn = this.d;
      return  Math.PI * ( ( dn*dn - dv * dv ) / 4 );
     },
     getmass: function(){
        return (this.getsquare * 1000 * 7.85 ) / 1000000;
     }
     
  },  
})