Calc IP

by Sergey Nikolaev

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
  <div class="container" id="counter">
  <div class="row">
    <div class="col-12 col-sm-8 col-md-6 col-xl-4 col-xxl-3 m-auto">
      <form class="rounded shadow mt-4 p-3">
        <h3 class="text-center mt-2 mb-4">Заказ IP</h3>
        <div class="row align-items-center border-bottom m-2 pb-2">
          <div class="col-5 p-0">Регион</div>
          <div class="col-7 p-0">
            <select v-model="region" class="form-select">
            <option v-for="reg in regions" :key="reg.alias" :value="reg">{{reg.title}}</option>
            </select>
          </div>
        </div>
        
        <div class="row align-items-center border-bottom m-2 pb-2">
          <div class="col-5 p-0">Стоимость IP</div>
          <div class="col-7 p-0">
            <span>{{region.price}} $</span>
          </div>
        </div>
        
        <div class="row align-items-center border-bottom m-2 pb-2">
          <div class="col-5 p-0">Количество</div>
          <div class="col-7 p-0">
            <select v-model="countIP" class="form-select">
            <option v-for="count in countsIP" :key="count+'ct'" :value="count">{{count}}</option>
            </select>
          </div>
        </div>
        
        <div class="row align-items-center border-bottom m-2 pb-2">
          <div class="col-5 p-0">Сумма</div>
          <div class="col-7 p-0">
            <span class="fw-bold">{{summa}} $</span>
          </div>
        </div>
        
        <a :href="'#'+region.alias+countIP" class="btn btn-primary w-100 mt-2">Заказать</a>
      </form>
    </div>
  </div>
  </div>
  <script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
  <script...

JavaScript

const countsIP = [5, 10, 100, 1000]

const regions = [
{alias:'RUS', title: 'Россия', price: 5},
{alias:'EUR', title: 'Европпа', price: 6},
{alias:'USA', title: 'Америка', price: 7}
]

const Counter = {
  data() {
    return {
    	countsIP,
    	countIP: 5,
    	regions,
      region: {alias:'RUS', title: 'Россия', price: 5}
    }
  },
  computed: {
  	summa() {
  		return this.region.price * this.countIP
  	}
  }
}

Vue.createApp(Counter).mount('#counter')