Untitled

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>VueJS</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="app">
    <h1>{{ store_name }}</h1>
    <div class="main">
      <ul class="cards">
        <li class="cards_item" v-for="product in products" :id="product.id">
          <div class="card">
            <div class="card_image"><img :src="product.img"></div>
            <div class="card_content">
              <h2 class="card_title">{{ product.title }}</h2>
              <p class="card_text">US ${{ product.price }}</p>
              <a :href="product.link" class="btn" :class="{ btn_black: btn.isDark }">{{ btn.title }}</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        store_name: 'The Store',
        btn: {
          title: 'Buy It Now',
          isDark: true,
        },
        products: [{
            id: '1a',
            title: 'iPhone XR',
            price: 899,
            link: 'http://www.madi.ru/',
            img: 'iphone_xr.jpg'
          },
          {
            id: '2b',
            title: 'iPhone XS MAX',
            price: 1099,
            link: 'http://www.madi.ru/',
            img: 'iphone_xs.jpg'
          },
          {
            id: '3c',
            title: 'iPhone X',
            price: 1000,
            link: 'http://www.madi.ru/',
            img: 'iphone_x.jpg'
          },
        ],
      }
    })
  </script>
</body>

</html>