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>필터 예제 {{1000 | numberWithDelimiter}}</p>
</div>
<script src="app.js"></script>

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,')
    }
  }
})