필터

by duckduck0054

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>06-16</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>

<body>
<div id="app">
  <input type="text" v-model="name" placeholder="변환할 영문 텍스트"/>
  {{name | space}}
</div>
</body>
<script type="text/javascript">
const app = new Vue({
	el: '#app',
  data: {
  	name: ''
  },
  filters: {
    space: function (value) {
      if (value) {
        return value.charAt(0).toUpperCase() + value.slice(1);
      }
      return '';
    }
  }
});

/*
filters 에 선언하는 필터는 주로 텍스트의 변환을 목적으로 사용한다.
angular 에서 주로 배열을 필터링하려는 것과 다소 다르다.
angular 에서와 마찬가지로 여러개의 파이프로 체이닝할 수 있다.
*/
</script>
</html>