vue显示隐藏密码

vue显示与隐藏密码.

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>


<div id="xx">
    <input :type="tt"> <button v-on:click="showp">{{msg}}</button>
    <input :type="tt"> <button @click="showp">{{msg}}</button>  <!-- v-on:事件名称简写@事件名称 -->

</div>


</body>

<script src="vue.js"></script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                tt:'password',
                msg:'显示密码',
            }
        },
        methods:{
            // showp:function (){
            //
            // }
            showp(){ // 单体模式

                if (this.tt === 'password'){
                    this.tt = 'text';
                    this.msg = '隐藏密码';
                }else {
                    this.tt = 'password';
                    this.msg = '显示密码';
                }

            }
        }

    })


</script>

</html>

 

posted @ 2021-04-11 21:00  urls  阅读(193)  评论(0)  编辑  收藏  举报