uview,u-input组件在明密文切换时app不生效

问题:使用u-input在浏览器中调试可以正确使用,但是在app中无效
一开始是通过三目运算符发现没有生效,然后通过使用v-if写了两套input,发现也没有效果

<u-form-item borderBottom ref="item1" prop="password">
          <u-input v-if="eyeStatus" v-model="loginInfo.password" :password ="true" password-icon="true" border="none"
            placeholder="密码" />
          <u-input v-else v-model="loginInfo.password" border="none" placeholder="密码" type ="text"/>
          <u-icon name="eye-off-outline" slot="right" @click="switchEyeOff" v-if="eyeStatus"></u-icon>
          <u-icon name="eye" slot="right" @click="switchEyeOff" v-else></u-icon>
</u-form-item>

通过搜索发现可以通过修改源码进行实现,不想修改源码,就没有使用修改源码的博文链接
直到看到这篇博文链接地址才知道v-if为啥不生效,原因:uni-app的组件部分时不支持动态切换
然后根据博主的建议使用v-show,已经成功实现

        <u-form-item borderBottom ref="item1" prop="password">
          <u-input v-show="eyeStatus" v-model="loginInfo.password" :password ="true" password-icon="true" border="none"
            placeholder="密码" />
          <u-input v-show="!eyeStatus" v-model="loginInfo.password" border="none" placeholder="密码" type ="text"/>
          <u-icon name="eye-off-outline" slot="right" @click="switchEyeOff" v-if="eyeStatus"></u-icon>
          <u-icon name="eye" slot="right" @click="switchEyeOff" v-else></u-icon>
        </u-form-item>

参考链接:https://blog.csdn.net/qq_35874340/article/details/128203327?spm=1001.2014.3001.5502

你可能感兴趣的:(uni-app,前端)