简单实现login页面密码框密码明密文(显示和隐蔽)

最近在写一个新的项目,从头开始写,所以就要从注册登录开始做起.以前写登录注册模块的时候,无外乎给input框一个type=”password”就可以了,近期因为要涉及到显示隐藏状态的切换

样式代码如下:

html

 <el-form-item label="密码" prop="password">
          <el-input
            v-model="from.password"
            prefix-icon="iconfont icon-3702mima"
            :type="flag ? 'text' : 'password'"
          ></el-input>
          <i
            :class="[flag ? 'iconfont icon-eye' : 'iconfont icon-biyan1']"
            style="margin-top: 8px; font-size: 18px"
            @click="flag = !flag"
            class="i"
          />
        </el-form-item>

js

 data() {
 flag: false,
  },