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

<script>
export default {
  data() {
    return {
      password: "",
      passwordFieldType: "password"
    };
  },
  methods: {
    switchVisibility() {
      this.passwordFieldType = this.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.