Vue js: Rufen Sie die Eingabezeichenfolge ab, zeigen Sie sie an und ermitteln Sie auch die Länge der Zeichenfolge

Question

Ich möchte eine Zeichenfolgeneingabe erhalten und diese zusammen mit der Anzahl der Zeichen der Zeichenfolge anzeigen.

Benötigen Sie Hilfe, um dies zu erreichen.

<section id="app">
      <h2>Learn  Vue Works</h2>
      <input type="text" @input="saveInput">
      <button @click="setText">Set Text</button>
    <br>

   <p>{{ qry }} {{ message }}</p>

====app.js=======================================

const app = Vue.createApp({
  data() {
    return {
      message: 'Vue is great!',
      qry: 'Query String : ',
      currentSearchInput: '',
    };
  },
  methods: {
    setText() {
      this.message = this.currentUserInput;
    },
   saveInput(event) {
      this.currentUserInput = event.target.value;
   },
  },
});

app.mount('#app');

Vielen Dank im Voraus.

Answer 1

使用 v-model 将 currentSearchInput 绑定到输入。您根本不需要 saveInput。

{{currentSearchInput}} {{currentSearchInput.length}}

setText() {
      this.message = this.currentSearchInput;
    },

您的代码有 currentSearchInput 和 currentUserInput。打字错误？