screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3>Vue Js mask a string with asterisks (*) show only last 4 digit</h3> <p>Original Number: {{ originalNumber }}</p> <p>Masked Number: {{ maskedNumber }}</p> </div> <script type="module"> const app = Vue.createApp({ data() { return { originalNumber: '1234567890' }; }, computed: { maskedNumber() { if (this.originalNumber.length <= 4) { return this.originalNumber; } const maskedDigits = '*'.repeat(this.originalNumber.length - 4); const lastFourDigits = this.originalNumber.slice(-4); return maskedDigits + lastFourDigits; } } }); app.mount('#app'); </script> <style> #app { text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); width: 600px; margin: 0 auto; padding: 20px } </style> </body> </html>