vue编写input 密码框 显示隐藏切换

在Vue中，你可以使用v-model指令来实现双向绑定，将密码框的值绑定到一个数据属性上。然后，你可以使用type属性来控制密码框的显示和隐藏。

以下是一个示例代码：

<template>
  <div>
    <input v-model="password" :type="showPassword ? 'text' : 'password'" />
    <button @click="toggleShowPassword">显示/隐藏密码</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      showPassword: false
    };
  },
  methods: {
    toggleShowPassword() {
      this.showPassword = !this.showPassword;
    }
  }
};
</script>

在这个示例中，password是一个数据属性，它用于存储输入框的值。showPassword也是一个数据属性，它用于控制密码框的显示和隐藏。toggleShowPassword方法用于切换showPassword的值。

在input元素中，我们使用v-model指令将输入框的值绑定到password属性上。同时，我们使用type属性来根据showPassword的值来决定密码框的显示类型（text或password）。

最后，我们在按钮上绑定了toggleShowPassword方法，当点击按钮时，会调用该方法来切换showPassword的值，从而实现密码框的显示和隐藏切换