How to use trim() in vue

사용자에게 입력을 받는 폼을 만들다보면 띄어쓰기 와 enter(개행)는 사용자가 입력하지 않은것으로 간주하고 싶을 때가 있다.

//Javascript

const greeting = '   Hello world!   ';

console.log(greeting);
// expected output: "   Hello world!   ";

console.log(greeting.trim());
// expected output: "Hello world!";

띄어쓰기를 여러번 입력한 것을 출력할때 그냥 출력하면 띄어쓰기도 같이 출력이 된다.
이때 trim()함수를 javascript에서 제공해준다.

vue에서도 trim함수를 제공한다.
vue에서는 우선 v-model로 input, textarea, select elements 폼에서 two-way 바인딩을 할 수 있다.

//Vue.js

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

이렇게 코딩하면 message에 사용자가 입력할때마다 사용자에게 보여줄 수 있게 된다.

이때 trim을 v-model에 붙여서 사용하길 권장한다.

//Vue.js

<input v-model.trim="msg">

이런식으로 사용하게 되면 띄어쓰기, 개행을 제외한 msg값을 가져올 수 있게 된다.