[Vue.js 3] 비밀번호 보기/숨기기 기능 구현(3항연산자 활용)

 

일단 로그인 화면을 만들었음

 

 

 

여기서 안 보이는 비밀번호가 보여기게 하려면 눈 모양 버튼을 클릭했을 때

비밀번호 input type="password"에서 type="text"로 바뀌면 됨.

덤으로 버튼 이미지도 바꿔줄거임.

 

script 코드 작성

<script>
import { ref } from '@vue/reactivity';

export default {
  name: 'LoginView',
  setup() {
	let isShow = ref(true); // Bool 값을 저장할 변수
	let pushShowPWButton = () => { // 눈 버튼 클릭 시 실행될 함수
		isShow.value = !isShow.value;
	}
	return {
		isShow,

		pushShowPWButton
	};
  }

}
</script>

 

ref와 reactive 차이는 알거라 생각함. 모르면 구글링 ㄱㄱ

이렇게 Bool 값이 변경되도록 했다면 template 코드 일부 수정함

<input :type='isShow?"password":"text"'
placeholder="비밀번호를 입력하세요">
<button @click="pushShowPWButton()">
	<img :src='isShow?require(경로 또는 url"):
	require("경로 또는 url")' >
</button>

 

 

이렇게 작성하고 눈 모양 버튼을 클릭하면

 

눈 모양 버튼 이미지도 바뀌고 글자도 보여지게 됨.

 

참 쉽죠?