Vue filter
- filter를 이용하여 표현식에 새로운 결과 형식을 적용한다.
- 중괄호 보간법 또는 v-bind 속성에서 사용이 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Filter</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="msg">
</div>
<div>
<h3>{{ msg | count2('문자를 넣어보세요') }}</h3>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: ''
},
filters: {
count2(val, alternative) {
if (val.length == 0) {
return alternative;
}
return `${val} : ${val.length}자`;
}
}
})
</script>
</body>
</html>
값이 바뀔 때 마다 val.length 값이 갱신되는 것을 확인할 수 있다.
'Web > Vue.js' 카테고리의 다른 글
| Vue 에서 FontAwesome 사용하기(npm 설치) (0) | 2021.05.21 |
|---|---|
| v-show 와 v-if 의 차이점 (0) | 2021.05.16 |
| Vue Directives (0) | 2021.05.16 |
| Vue Instance Life Cycle (0) | 2021.05.16 |
| Vue Instance 생성하기 (0) | 2021.05.16 |
