现在一上来，密码是可见的并且眼睛是睁开的，怎样才能上来密码是不可见并且眼睛是闭着的

Question

<template>
   <div>
      <div class="xym flex-h flex-between">
            <input class="input" placeholder="请输入密码" v-model="password" :type="inputType" />
            <img src="../assets/images/eye_no.png" class="btn_mmbkj" v-if="eye" @click="showPassword()" />
            <img src="../assets/images/eye.png" class="btn_mmkkj" v-else @click="showPassword()" />
        </div>
   </div>
</template>

<script>
   export default {
        data() {
    return {
      password:'',    //v-model input 数据双向绑定
        eye:false,
        inputType:''
    };
  },
  methods: {
               //点击图标  密码显示隐藏 切换
            showPassword:function(){ /*密码显示 */
                // var me = this;
                if (this.eye) {
                    this.eye = false
                 this.inputType = 'text'
                  } else {
                    this.eye = true
                 this.inputType = 'password'
                  }
                }
        }
   }
</script>

<style lang="scss" scoped>

</style>

Answer 1

给input加个 type="password"
眼睛你可以默认就放闭着的，在通过事件改变