Javascript 如何制作显示反转输入的文本框

嘿，我想做一个文本框输入，如果我输入1，然后输入2，然后显示21，如果我输入3，应该显示321，我在前端使用Vue js

这是我试过的

我试图观察变化并改变值，但结果是一个无限循环

我尝试了向下键、按下键和向上键，但它没有注册第一个输入

我也尝试了keyup，但keyup的问题是，它首先向用户显示键入的内容，然后将其反转

Html:

 <input v-model="someStr" @input="reverseString"/>
{{ reverseStr }}

---

据我所知，您希望使用@keyup实时反转输入，并将句子保留在输入字段中，经过一些挖掘后，您不能在仍然键入的情况下使用v模型更改输入，但我找到了一个很好的解决方法

使用绝对定位和两个输入，一个用于输入（隐藏但在顶部），另一个用于输出（可见但在底部） 以下是现场预览：

---

我提供了这个解决方案，但问题是，首先它向用户显示您键入了一些内容，然后它会反转为“这是什么？”，在沙盒上试试看，它很管用！我没有显示你键入的内容！检查生病的链接bro，就像这很酷，但是如果只使用一个输入，在同一时间在同一个输入中键入并反转，会怎么样？我不认为这是可能的，因为它是实时更新的，所以如果你这样做并调用一个反转函数，你已经反转了最后一个反转！据我所知，它们需要分开，你将失去选择功能，这是唯一的缺点，但它仍然工作，如果你找到任何其他解决方案，请更新我，我做了更新检查第二个沙盒（一个输入），如果它不工作，检查第三个我想在文本框内显示它，而不是在外面的某个地方

data() {
 return {
  someStr: '',
  reverseStr: ''
 }
}



 methods: {
  reverseString() {
   this.reverseStr = this.someStr.split("").reverse().join("")
  }
}

<template>
  <div class="hello">
    
    <div class="invert">
      <input type="text" v-text="input" class="input"   @keyup="handle" >
      <input type="text" v-model="output" class="output"  >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input : '',
    }
  },
  computed : {
    output (){
        return this.input.split("").reverse().join("");
    }
  },
  methods : {
    handle(event) {
         this.input = event.target.value;
    }
  }
}
</script>
<style scoped>
  .invert {
    position : relative ;
    width: 200px;
    height: 20px;
    margin: 0 auto;
  }
  .output , .input{
    position: absolute;
    width: 100%;
    right: 0;
  }
  .input {
    z-index: 5;
    opacity : 0 ;
  }
    .output {
    z-index: 0;
    opacity : 1 ;
  }
</style>

<template>
  <div class="hello">
    <div class="invert">
      <input type="text" v-model="input" class="input" @input="handle" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: "",
    };
  },

  methods: {
    handle(event) {
      if (this.input.length > 1) {
        this.input =
          this.input[this.input.length - 1] +
          this.input.substring(0, this.input.length - 1);
      }
    },
  },
};
</script>

.input {
  z-index: 5;
  background: transparent;
}