vxe-input password 隐藏显示

vxe-input是一个Vue Element UI库中的输入组件，专用于密码输入场景。当涉及到隐藏和显示密码的功能时，`v-model.lazy`和`type`属性可以派上用场。默认情况下，`type="password"`会让输入的内容变成星号(*)形式，即密码会被隐藏。

如果你想实现在点击某个按钮时切换密码可见与否，你可以这样做：

<template>
  <div>
    <vxe-input v-model.lazy="password" type="password"></vxe-input>
    <button @click="togglePasswordVisibility">显示/隐藏密码</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
    };
  },
  methods: {
    togglePasswordVisibility() {
      this.password = this.password ? '' : '****'; // 显示*号时设为空字符串，反之则还原为原始值
    },
  },
};
</script>

在这个例子中，当你点击按钮时，如果密码已经展示，则将其清空；如果还是隐藏状态，就显示为星号。这样实现了密码的切换显示效果。

相关问题

vxe-table中vxe-input

vxe-table是一个基于Vue.js的PC端表格组件，它支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器等功能。vxe-table中的vxe-input是用于表格编辑的输入框组件。

在给vxe-table的列配置项中，使用vxe-column组件可以定义表格的列，并通过edit-render属性来自定义列的编辑渲染。在edit-render属性中，通过template标签可以定义自定义的表单元素，比如vxe-input。在这个例子中，vxe-column中定义了两个列，分别是字段名称和字段编码，它们的编辑渲染都是通过vxe-input来实现的。

在getPinyin(row)方法中，通过js-pinyin库将字段名称转换为首拼解析，并将解析结果赋值给字段编码。

< vxe - form : model =" PatientIDForn ": data =" PatientIDForm " title - align =" right " title - width ="100"@ submit =" editSubmit "> < Vvxe - form - item v - for =" item of PatientIDForn ": key =" item . key " title - align =" left ": span ="24": title =" item . label "> < vxe - input v - model =" item . value " type =" number " min ="0" style =" width :60px": key =" item . key +'1'"></ vxe - input > < vxe - button type =" text " style =" color :#0e9aef": loading =" item . get _ button _ loading "@ click =" getPatientId ( item )": key =" item . key +'2'"＞获取＜/ vxe - button >< br >< vxe - input V - model =" item . result ": key =" item . key +'3'"></ vxe - input > < span : key =" item . key +'4'">{{'实际获取数量：'+( item . result ? item . result . split (). length :0]}}</ span > </ vxe - form - item ></ vxe - form >为什么我的第二个vxe-input中的值不随着getPatientId方法中的赋值而更新

可能是因为Vue的响应式数据机制没有触发更新。你可以尝试在getPatientId方法中，手动触发更新，即调用Vue的$forceUpdate方法，或者使用Vue.set方法更新数据。另外，你也可以在第二个vxe-input的v-model绑定中，使用计算属性，将item.result作为计算属性的依赖，这样当item.result发生变化时，计算属性会重新计算，从而更新v-model绑定的值。