vue활용하기 2편. [필터 사용하기]

vue에서는 웬만한 기능은 프론트에서 처리가 가능하다. 특히 계산기와 비슷한 종류의 프로그램들(환율, 평수, 각종 수식...)을 만들 때 vue의 기능은 정말 편리하다. 이 편리함 중에서도 더 편리한 부분은 필터다. vue의 필터 기능을 사용하면, 굳이 서버에서 관련기능을 만들 필요가 없다. 프론트 단계에서 데이터값을 원하는 설정에 맞게끔 임의적으로 변형할 수 있다. 

바로 필터 기능을 사용해보자. 

1 index.html

html 껍데기는 아래와 같이 구성한다. 

---

<div id="app">

  <header v-text="sitename">Filter 기능 활용</header>

    <main>

       <div class="filter row">

          <div class="col">

             <figure>

                 <img v-bind:src="item.imgsrc">

             </figure>

          </div>

          <div class="col col-expand">

               <p v-text="item.title"></p>

               <p v-text="item.description"></p>

               <p v-text="item.price"></p>

          </div>

        </div>

   </main>

</div>

---

2 vue인스턴스 작성

vue인스턴스를 작성하고, 기본 데이터값을 임의로 지정한다. 만일 파이어베이스와 연결할 수 있다면, data값에 파이어베이스의 DB정보를 불러오는 식으로 응용가능하다. 하지만 예제파일에서는 최대한 간단하게 데이터를 구성했다. 

---

<script>

 let main = new Vue({

        el:"#app",

     data:{

          sitename:'webdoli',

          item:{

             title:'소스 판매',

             description: '',

             price:2000,

             imgsrc:'이미지경로'

          }

     }

  })

</script>

---

위의 상태를 랜더링하면 아래와 같은 화면이 된다. 

Filter 기능 활용

{{ item.price }}

현재 가격부분이 2000으로 되어 있다. 이 부분을 자동으로 달러값으로 변경하는 필터를 만들어보자. 

3 필터 생성

---

<script>

 let main = new Vue({

     el:"#app",

    data:{

          sitename:'webdoli',

          item:{

             title:'소스 판매',

             description: '',

             price:2000,

             imgsrc:'이미지경로'

          }

     },

    filters:{

         chgPrice:function(price){

              return "$"+(price/100).toFixed(2);

         }

    }

  })

</script>

---

chgPrice함수에서 .toFixed(2)는 십진수 변환을 의미한다. filters객체에는 chgPrice뿐만 아니라 여러가지 필터를 추가할 수 있다. 

---

<div id="app">

  <header v-text="sitename">Filter 기능 활용</header>

    <main>

       <div class="filter row">

          <div class="col">

             <figure>

                 <img v-bind:src="item.imgsrc">

             </figure>

          </div>

          <div class="col col-expand">

               <p v-text="item.title"></p>

               <p v-text="item.description"></p>

               <p>{{ item.price | chgPrice }}</p>

          </div>

        </div>

   </main>

</div>

---

필터를 적용해보자.

Filter 기능 활용

{{ item.price | chgPrice }}

필터를 적용하고나면, 위와 같이 원화가격이 달러로 변환되는 결과값을  볼 수 있다. 필터의 기능은 vue의 methods를 활용하더라도 똑같이 만들 수 있지만 수식이나 기호변경 같은 부분에서는 필터 기능이 훨씬 간편하다.