Uni App-----之u-input（密码明文小眼睛切换）

本文作为临时记录使用。

前言 ：

最近做注册和忘记密码功能，需要写到小眼睛显示密码是否明文展示。出现的问题是在pc上正常实现效果，在手机端不生效。

解决思路：

• H5 暂未支持动态切换，请使用 v-if进行整体切换。

        <!-- 错误写法 -->
	<input :type="isText?'text':'number'" placeholder="请输入内容" />
 
        <!-- 正确写法 -->
	<input v-if="isText" type="text" placeholder="请输入文本" />
	<input v-else  type="number"  placeholder="请输入数字" />

  在官网已经给出，并不是有些控件的Bug,而是uniapp的组件部分是不支持动态切换的。 所以针对小眼睛功能。做出如下修改：

错误代码：

   
                
                
            

正确代码：

        v-show="showPassWord2===true" placeholder="请再次输入密码" v-model="pwd2" class="input_class_pwd"
                :password="true">
                
                
            
                             :password="false">
                
                
            

总结：

      处理方式就是写两遍。不论设置:password或者是type，只能初始赋值，不可以三元表达式。

否则在uniapp组件上不生效。若是原生html写法或者vue的vant组件写法则不存在此问题。