Vue js：获取输入字符串并显示，还获取字符串的长度答案

【问题标题】：Vue js : get the inputed string and display , get also lenght of stringVue js：获取输入字符串并显示，还获取字符串的长度
【发布时间】：2022-01-07 23:42:54
【问题描述】：

我想获取字符串输入并显示它，还有字符串的字符数。

需要帮助才能实现。

    <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');

提前致谢。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

<input v-model='currentUserInput' type="text" />
{{currentSearchInput}} {{currentSearchInput.length}}

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

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

【讨论】：

【解决方案2】：

是的，我同意史蒂文的观点。不需要使用saveInput 函数。只需使用 v-model="currentUserInput" 然后点击按钮时，就这样设置；

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

【讨论】：

【解决方案3】：

如果您想让您的用户控制保存 <input> 的值，在 Vue 3 中有两种方法：

在输入元素上使用teplate ref 并得到.value：

const { createApp, reactive, toRefs } = Vue;

createApp({
  setup() {
    const state = reactive({
      saved: '',
      input: null
    });
    return {
      ...toRefs(state),
      updateValue: () => { state.saved = state.input.value }
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <input ref="input" type="search">
  <button @click="updateValue">Save</button>
  <pre v-text="{ saved, ['saved.length']: (saved && saved.length) || 0 }" />
</div>

使用v-model 指令

v-model 是用于将表单元素的值双向数据绑定到模型的指令。您可以将模型更新概念化为“即时”（使用input 侦听器完成）。
就像在第一个示例中一样，您可以保留一个单独的 saved 值，并在用户单击按钮时覆盖它：

const { createApp, reactive, toRefs, computed } = Vue;

createApp({
  setup() {
    const state = reactive({
      saved: '',
      input: '',
    });
    const logger = computed(() => ({
      ...state,
      ['saved.length']: state.saved.length || 0,
      ['input.length']: state.input.length || 0
    }));
    return {
      ...toRefs(state),
      logger,
      updateValue: () => { state.saved = state.input }
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <input v-model="input" type="search">
  <button @click="updateValue">Save</button>
  <pre v-text="logger" />
</div>

这两个示例的区别在于，在第一个示例中，模型包含对实际 <input> 元素的引用（允许您访问其所有本机道具和方法），而在第二个示例中，state.input 仅包含<input> 元素的值。

【讨论】：