javascript - 如何在 Vue 中切换要加密和未加密的输入字段的内容？

Question

我有一个输入字段，我希望内容显示为“ab****gh”，并且能够通过单击以显示“abcdefgh”来切换内容。基本上是显露和不显露。当我更改它时，我无法使值具有反应性。下面是我一直在使用的一些部分代码。

基本上我是在尝试用加密值交换输入的内容

谁能看出我哪里出错了？

regex_hide_characters: /(?<!^).(?!$)/g,
inputValue: this.value,
encryptedInputValue: this.value.replace(this.regex_hide_characters, '*'),

hidePrivateContent() {
    this.reveal = !this.reveal;
    if (!this.reveal) {
        this.$refs.input.value = this.encryptedInputValue;
     }
},

Answer 1

这是一个非常基本的示例，说明您将如何实现这样的目标:

new Vue({
 el: '#app',
 computed: {
  hiddenPass() {
    if (this.isPass) return this.pass.slice(0, 2) + '*******';
    return this.pass;
  }
 },
 data() {
  return {
    isPass: true,
    pass: 'abc124defg'
  }
 },
 methods: {}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" v-cloak>
  <div>{{hiddenPass}}</div>
  <button @click="isPass=!isPass">toggle view</button>
</div>

在代码片段中，我利用了 computed properties以便根据实例上的数据确定如何显示“ protected ”通行证。

希望对您有所帮助!