切换el-input的可见性

以下是使用Vue和Element UI实现切换el-input可见性的代码：

<template>
  <div>
    <el-input v-model="password" :type="showPassword ? 'text' : 'password'" placeholder="请输入密码">
      <i slot="suffix" class="el-icon-view" :class="showPassword ? 'el-icon-view-show' : 'el-icon-view-hide'" @click="showPassword = !showPassword"></i>
    </el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      showPassword: false
    }
  }
}
</script>

在上面的代码中，我们使用了Element UI的el-input组件来创建一个输入框，并使用v-model指令将输入框的值绑定到Vue实例的password属性上。我们还使用了:type属性来动态设置输入框的类型，如果showPassword为true，则输入框的类型为text，否则为password。

我们在输入框的后缀中添加了一个<i>元素，并使用了slot属性将其放置在输入框的后缀位置。我们使用:class属性来动态设置<i>元素的class，根据showPassword的值来切换<i>元素的样式。我们还使用@click属性来监听<i>元素的点击事件，并在点击时将showPassword的值取反。

这样，当用户点击<i>元素时，showPassword的值将被取反，输入框的类型也会随之改变，同时<i>元素的样式也会发生变化，从而实现了切换el-input可见性的效果。