JSFiddle - React, Tailwind, and code Playground

by flourscent

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
　<p>{{ items[0].name }}: {{ items[0].price }} x {{ items[0].quantity }}</p>
  <p>소계: {{ totalPrice | numberWithDelimiter }} 원</p>
  <p>합계(세포함): {{ totalPriceWithTax | numberWithDelimiter }} 원</p>
  <!-- 속성값에 따라 화면 표시 여부가 결정 -->
  <p v-show="!canBuy">
  　{{ 1000 | numberWithDelimiter }} 원 이상부터 구매 가능
  </p>
</div>

JavaScript

var items = [
  {
    name: '연필',
    price: 300,
    quantity: 0
  },
  {
    name: '공책',
    price: 400,
    quantity: 0
  },
  {
    name: '지우개',
    price: 500,
    quantity: 0
  }
]
var vm = new Vue({
  el: '#app',
  data: {
    items: items
  },
  filters: {
    numberWithDelimiter: function (value) {
      if (!value) {
        return '0'
      }
      return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')
    }
  },
  computed: {
    totalPrice: function () {
      return this.items.reduce(function (sum, item) {
        return sum + (item.price * item.quantity)
      }, 0)
    },
    totalPriceWithTax: function () {
      return Math.floor(this.totalPrice * 1.10)
    },
    canBuy: function () {
      return this.totalPrice >= 1000 // 1000원 이상이므로 구매 가능
    }
  }
})
window.vm = vm