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>
</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)
    }
  }
})
window.vm = vm