JSFiddle - React, Tailwind, and code Playground

by flourscent

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <!-- 1000원 이상이 될 때까지 붉은 표시 -->
  <div :style="errorMessageStyle">
    <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>
</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
    },
    errorMessageStyle: function () {
      // canBuy가 거짓이면 붉게 표시
      return {
        border: this.canBuy ? '' : '1px solid red',
        color: this.canBuy ? '' : 'red'
      }
    }
  }
})
window.vm = vm