[vue]checkBox 중복체크 방지, input창 글자수 제한

1. 중복체크 방지

자바스크립트로 위 함수와 같이 작성할 수 있지만, Vue에서 아래와 같이 코드가 있을때, 중복체크를 방지하려면

 <b-form-checkbox inline v-model="checkCrypto" :value="item.blockchain" unchecked-value="" @change="onChangeBlockchain"/>

v-model="checkCrypto" 부분을 넣어주면 된다.

data부분에 checkCrypto : false로 명시해서 작성하면 됨.

2. input창 글자수 제한

input 속성에 maxlength명시해주면 된다.

<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">

3. v-if문 사용법

 <input type="password" v-model="password" placeholder="Password" 
 	v-if="!isClickShowPassword">
 <input v-model="password" placeholder="Password" v-else>

리액트에서는 this.state의 값에 따라서 값을 변하게 하는 반면, 뷰에서도 약간은 비슷하지만, html부분에서 더욱 직관적으로 표시가 가능하다. 코드의 깔끔함은 리액트가 더 깔끔한 듯 싶지만, 직관적인거는 뷰가 더 직관적인듯 싶다.

v-if라는 조건을 만들어서 data(리액트의 state와 비슷)에 isClickShowPassword값을 주고, 그 값이 true일때 위의 input, 아닐때 아래 인풋을 나타낼 수 있다, 위의 코드는 로그인화면에서 비밀번호 보기 버튼을 클릭시 유저에게 보여지는 값이다.