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

1.第一种方法通过控制样式，还有vue的v-if 条件渲染来实现。代码如下：

<template>
<div>
	<el-form>
		 <el-form-item v-if="visible" label="密码">
                <el-input type="password" v-model="formPassword.newPassword" placeholder="请输入密码" style="width:200px">
                    <i slot="suffix" title="显示密码" @click="changePass('show')" style="cursor:pointer;"
                       class="el-input__icon iconfont el-icon-open"></i>
                </el-input>
            </el-form-item>
            <el-form-item v-else label="密码">
                <el-input type="text" v-model="formPassword.newPassword" placeholder="请输入密码" style="width:200px">
                    <i slot="suffix" title="隐藏密码" @click="changePass('hide')" style="cursor:pointer;"
                       class="el-input__icon iconfont el-icon-turn-off"></i>
                </el-input>
            </el-form-item>
	</el-form>
</div>
</template>
<script>
	export default{
		data(){
			return{
				formPassword: {
                    newPassword: ''
                },
                visible: true
			}
		}
	}
</script>

2.使用element-ui的组件

<template>
	<div>
		<el-input placeholder="请输入密码" v-model="input" show-password></el-input>
	</div>
</template>
<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>