vue+element-ui实现显示隐藏密码

<template>
        <el-form :model="cuser_info" label-width="115px" label-position="left" >
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item v-if="visible2" label="确认密码"  prop="confirm_pwd">
                <el-input type="password" v-model="cuser_info.confirm_pwd" placeholder="请再次输入密码">
                  <i slot="suffix" title="显示密码" @click="changePass('show',2)" style="cursor:pointer;"
                     class="iconfont icon-xianshizy"></i>
                </el-input>
              </el-form-item>
              <el-form-item v-else label="确认密码" class="is-required" prop="confirm_pwd">
                <el-input type="text" v-model="cuser_info.confirm_pwd" placeholder="请再次输入密码">
                  <i slot="suffix" title="隐藏密码" @click="changePass('hide',2)" style="cursor:pointer;"
                     class="iconfont icon-yincangby"></i>
                </el-input>
              </el-form-item>
            </el-col>
        </el-form>
</template>

<script>
  export default {
    name: "AddC_user",
    data(){
      return{
        cuser_info:{
          confirm_pwd:'',
        },
        visible2: true,
      }
    },
    methods:{
      //控制密码显示隐藏
      changePass(value,kind) {
          this.visible2 = !(value === 'show');
      },
    },
  }
</script>