명심하세요. 필터가 있는 바인딩은 {{property | filter}}의 일반 표현식을 가집니다. 그에 따라 {{product.price | formatPrice}}처럼 가격 바인딩을 업데이트했습니다.

▲ 그림 2-15 작성한 가격 형식화는 가격 속성 값을 표시하는 곳에 달러 사인과 알맞은 구두점 추가

 

크롬으로 이동해서 새로 고침한 후 확인해 보세요. 그림 2-15와 같이 형식화된 가격이 나타나는 것을 볼 수 있습니다.

콘솔에서 데이터를 수정하면 실시간으로 어떻게 필터가 다른 상품 가격 값에 반응하는지 볼 수 있습니다. 다른 값들을 넣고 싶으면 콘솔을 열어 webstore.product.price = 150000000을 입력해서 값을 설정해 보세요.