App.vvue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<template> <div id="app"> <label>Password</label> <input type="password" v-model="password" /> <span v-if="score === 0">Use better password</span> <span v-if="score === 1">risky</span> <span v-if="score === 2">guessable</span> <span v-if="score === 3">weak</span> <span v-if="score === 4">safe</span> <span v-if="score === 5">secure</span> <password-meter @score="onScore" :password="password" /> </div> </template> <script> import { defineComponent, ref } from "vue"; import PasswordMeter from "vue-simple-password-meter"; export default defineComponent({ name: "App", components: { PasswordMeter, }, setup() { const password = ref(""); const score = ref(null); const onScore = (payload) => { console.log(payload.score); // from 0 to 4 console.log(payload.strength); // one of : 'risky', 'guessable', 'weak', 'safe' , 'secure' score.value = payload.score; }; return { password, onScore, score, }; }, }); </script> |
