Question

让我们说，我有

<input type="text">

我想允许用户在此输入中输入密码。

问题：如何显示一个值并存储另一个值？

显示修改后的值非常简单：

// when user is inside input
valueEncrypted() {
            let s = "";
            for(let i = 0; i < this.value.length; i++) {
                if(i === this.value.length - 1) {
                    s += this.value[i]; //show last character types
                } else {
                    s += "*";
                }
            }
            return s;
        }

  // when user is outside of input
   s += "*"; // only this line is left inside loop

但是如何存储一个值（"password"）并在输入字段中显示另一个（"*******d"）。

Answer 1

你可以利用fact <input v-model="something">只是语法糖

<input v-bind:value="something" v-on:input="something = $event.target.value">

因此，您可以编写一个组件，您可以在其中传递vue实例变量并在组件内修改它，我创建了一个类似的组件：

Vue.component('passoword', {
  template: '\
    <input type="text" v-model="localVar"  @keyup="addPass">\
  ',
  props: ['value'],
  data: function() {
    return {
      localVar: this.value
    }
  },
  methods: {
    addPass: function(event) {
      let LocalVal = this.value + event.key
      this.$emit('input', LocalVal)
      let s = "";
      for (let i = 0; i <= LocalVal.length; i++) {
        if (i === LocalVal.length) {
          s += LocalVal[i-1]; //show last character types
        } else {
          s += "*";
        }
      }
      this.localVar = s
    }
  }
})

您可以看到它的演示here。

您还可以查看此link以获取替代方法。

Vue.js组件显示密码字段

1 个答案: