[Vue] 인코딩 / 디코딩

1. 문자열 BASE64 인코딩/디코딩

<h3>인코딩 디코딩</h3>
  <input type="text" v-model="memo"><br>

  <input readonly :value="encode">
  <button type="submit" @click="encoding">인코딩 버튼</button> <br>
  <input readonly :value="decode">
  <button type="submit" @click="decoding">디코딩 버튼</button>

data() {
  return {
    memo: '',
    encode: '',
    decode: ''
  };
},
methods: {
   encoding() {
      this.encode = window.btoa(encodeURIComponent(this.memo))
    },
    decoding() {
      this.decode = decodeURIComponent(window.atob(this.memo))
    },
}

 

단체오픈카톡방에서 백엔드분이  input값에 text를 쳐서 클릭 버튼을 누르면

또 다른 input값에 인코딩한 글씨가 보이게 어떻게 하냐고 해서

몇일 전 공부한 v-model 양방향에 대해 설명하다가 

디코딩하는 부분은 구글링으로 통해 찾고, :value 바인딩해줘서 input값에 결과 나오게 했다! 

 

맨날 내가 물어본 입장이였는데 처음으로 누군가에게 가르쳐줬다! 짜릿해

 

 

 

아래 참고 블로그

http://1004lucifer.blogspot.com/2016/01/javascript-base64.html

<div style="height:300px">
  <input type="text" id="text1" /><br />
  <button id="encoding">인코딩</button>
  <button id="decoding">디코딩</button><br />
  결과: <span id="result"></span>
</div>

$('#encoding').click(function() {
  $('#result').html(
  	window.btoa(
    	encodeURIComponent(
      	$('#text1').val()
      )
    )
  )
})
$('#decoding').click(function() {
  $('#result').html(
    decodeURIComponent(
  		window.atob(
      	$('#text1').val()
      )
    )
  )
})

제이쿼리로 구현하셨는데 나는 자스와 뷰로 바꿔서 구현했다지.