Vue에서 v-model.trim의 목적은 무엇입니까?

Vue에서 v-model.trim의 목적은 무엇입니까?

나는 Vue에 처음 와서 배웠다.v-model지시.무엇을 테스트하려면v-model.trim내가 다음과 같은 코드를 썼나요?

<template>
<p>Hello {{ myName }}</p>
<form>Name: <input type="text" v-model.trim="myName"/></form>
</template>

<script>
export default {
  data(){
    return{
      myName: "",
    };
  },
};
</script>

입력했을 때" B o b"결과물은"B o b"근데 안 써도 알 수 있어요.v-model.trim그냥 사용하세요.v-model다음과 같이

<template>
<p>Hello {{ myName }}</p>
<form>Name: <input type="text" v-model="myName"/></form>
</template>

<script>
export default {
  data(){
    return{
      myName: "",
    };
  },
};
</script>

동일한 출력을 얻을 수 있습니다.의 목적은 무엇입니까?.trim?

문서별

사용자 입력의 공백을 자동으로 잘라내려는 경우 v-model 관리 입력에 트리밍 한정자를 추가할 수 있습니다.

v-model.trim="msg"하는 것과 같다msg = msg.trim()입력 전후의 공백을 제거합니다.

궁금한 점이 있으시면 이 데모를 확인해 주십시오.

빈 공간을 찾으시는 경우view(html)브라우저는 공백은 무시합니다.콘솔 체크인을 시도합니다.

Javascript에서 .trim()은 문자열의 처음과 끝에 있는 공백을 제거하는 String 메서드이므로 v-model에도 동일한 동작이 적용됩니다.

문자열의 시작과 끝의 간격을 줄여줍니다.

따라서 모델 바인딩을 사용하여 이메일을 입력했다고 가정할 때 사용자가 이메일 뒤에 공백이 있는 이메일을 입력하면 유효한 이메일 주소가 되지 않습니다.그래서...trim수식자는 끝의 간격을 잘라냅니다.

언급URL : https://stackoverflow.com/questions/65996464/in-vue-what-is-the-purpose-of-v-model-trim