[html] 寫一個密碼默認星號，但可以查看密碼的輸入框

<i class="icon-password"></i> <input type="text" v-if="pwdType" v-model="eyeTxt" /> <input type="password" placeholder="輸入新密碼" v-model="eyeTxt" v-else /> <img :src="seen ? seenImg : unseenImg" @click="changeType()" v-on:mouseover="hoverEye" v-on:mouseout="outEye" class="icon-eye" /><script> export default {data() {return {seen: "",unseenImg: require("../../assets/pics/see0.svg"), //看不見密碼時小眼睛的顯示圖片地址seenImg: require("../../assets/pics/see1.svg"), //看得見密碼時小眼睛的顯示圖片地址eyeTxt: "",pwdType: false //此時文本框隱藏，顯示密碼框 };},methods: {changeType: function() {this.seen = !this.seen; //小眼睛的變化this.pwdType = !this.pwdType; //跟著小眼睛變化，密碼框隱藏，顯示文本框 內容就顯示了},hoverEye: function(event) {this.seen = !this.seen;},outEye: function(event) {this.seen = !this.seen;}} }; </script>

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[html] 写一个密码默认星号，但可以查看密码的输入框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。