Vue.js 필터로 소비세와 세 자리의 쉼표를 분리하다

※ 이 기사는 자신의 블로그(4.56915.),그리고 Qita.컴에서도 같은 내용을 투고했다.

필터

데이터 등을 성형하는 데 쓰인다.
이번에'1000'이라는 데이터를 교부하면 소비세가 포함된'1100'을 소수점 3자리당'1100'으로 표시하는 것이 목표다.

컴퓨터와 어떤 차이가 있습니까?

필터는 컴퓨터와 다르게 연결할 수 있습니다.
앞에서 말한 바와 같이 소비세 세율을 더하면 소수 자릿수로 이 수치를 구분할 수 있다.
또한 원본 데이터를 바꾸지 않은 상태에서만 표시되는 필터입니다.

실제 코드

필터를 | 로 연결할 수 있습니다.
필터는 파라미터를 받아들일 수 있지만, 호출할 때 첫 번째 파라미터만 생략할 수 있습니다.

<div id="app">
    <h2>消費税込み価格</h2>
    <p>{{ price | includedTax }}</p>
    <!-- 結果：1100 -->

    <h2>消費税込み + 3桁ごとのカンマ</h2>
    <p>{{ price | includedTax | formatNumber }}</p>
    <!-- 結果：1,100 -->

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            price: 1000
        },
        filters: {
            includedTax: function (price) {
                return price * 1.1
            },
            formatNumber: function (price) {
                return price.toLocaleString()
            }
        }
    })
</script>

매개변수 2 이상일 경우

첫 번째 파라미터는 임의로 필터된 데이터로 이번 price로 판단할 수 있습니다.
따라서 두 번째 파라미터 이상에 도달했을 때 필터를 호출할 때 파라미터를 지정합니다.

<div id="app">
    <h2>消費税込み価格</h2>
    <!-- 第1引数のpriceは省略できる -->
    <!-- 第2引数のtaxRateから指定する -->
    <p>{{ price | includedTax(1.1) }}</p>
    <!-- 結果：1100 -->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            price: 1000
        },
        filters: {
            includedTax: function (price, taxRate) {
                return price * taxRate
            }
        }
    })
</script>

전역 필터 정보

로컬 필터를 정의했습니다. 구성 요소에서만 인용할 수 있습니다.
모든 구성 요소를 인용하려면 전역 필터를 정의해야 합니다.
호출 방식은 같지만 정의 방식은 다르다.
점은 Vue를 로드한 후 및 인스턴스화하기 전입니다.

서법

<div id="app">
    <h2>消費税込み価格</h2>
    <!-- 第1引数のpriceは省略できる -->
    <!-- 第2引数のtaxRateから指定する -->
    <p>{{ price | includedTax(1.1) }}</p>
    <!-- 結果：1100 -->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.filter('includedTax', function(price){
        return price * 1.1
    })
    var app = new Vue({
        el: '#app',
        data: {
            price: 1000
        }
    })
</script>