uniapp密码显示隐藏

### 实现 UniApp 中密码输入框文本的显示和隐藏

为了实现在 UniApp 应用程序中密码输入框文本的显示和隐藏功能，可以通过控制 `input` 组件的 `type` 属性来达到效果。具体来说，通过设置 `:password="showPassword"` 动态绑定属性值，并利用 Vue.js 的响应式特性改变该布尔变量的状态。

以下是具体的代码实现：

#### 页面结构 (`<template>` 部分)

<template>
  <view class="container">
    <view class="pwd-view">
      <!-- 使用 v-model 双向数据绑定 -->
      <input type="text" :password="showPassword" placeholder="请输入密码" />
      <!-- 利用条件渲染切换眼睛图标的类名 -->
      <view :class="[!showPassword ? 'icon iconfont iconesey' : 'icon iconfont iconcloseesey']" @click="toggleShowPwd"></view>
    </view>
  </view>
</template>

#### JavaScript逻辑 (methods 和 data 定义)

export default {
  data() {
    return {
      showPassword: true, // 控制密码是否以密文形式展示，默认true表示隐藏状态
    };
  },
  methods: {
    toggleShowPwd() {
      this.showPassword = !this.showPassword;
    }
  }
}

此方法允许用户点击眼睛图标时触发事件处理器函数 `toggleShowPwd()` 来反转当前的 `showPassword` 值，从而实现了密码可见性的即时切换[^2]。