Vue.js encode decode string to Base64
We can use JavaScript in-built btoa() and atob() function to encode and decode the string to Base64. You can use the same functions to encode and decode string to Base64 in vuejs. You can also use our online editor to edit and run the code online.
Vue.js encode decode string to Base64 JavaScript | VueJS Example
Let us understand how to use btoa() and atob() function in Vuejs-
Encode String
You can use built-in function btoa() to encode the string. Here is an example-
Example:
<div id="app">
<p>String = {{ str }}</p>
<p>Encoded Base64 String = {{encodedStr}}</p>
<button @click="myFunction()">Click Me</button>
</div>
<script>
new Vue({
el: '#app',
data: {
str:"Hello World!",
encodedStr:''
},
methods:{
myFunction: function () {
this.encodedStr = btoa(this.str);
}
}
});
</script>
|
Output of above example-
Decode String
You can use built-in function atob() to encode the string. Here is an example-
Example:
<div id="app">
<p>String = {{ str }}</p>
<p>Decoded Base64 String = {{decodedStr}}</p>
<button @click="myFunction()">Click Me</button>
</div>
<script>
new Vue({
el: '#app',
data: {
str:"SGVsbG8gV29ybGQh",
decodedStr:''
},
methods:{
myFunction: function () {
this.decodedStr = atob(this.str);
}
}
});
</script>
|
Output of above example-
Advertisements
