<template>
  <input :type="passwordFieldType" v-model="password">
  <button type="password" @click="switchVisibility">show / hide</button>
</template>

<script setup>
  ref: password = "";
  ref: passwordFieldType = "password";
  
  const switchVisibility = () => passwordFieldType = passwordFieldType === "password" ? "text" : "password";
</script>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.