Vue中如何处理用户输入？

Most apps require users to input somethingto forms. We can do this easily with Vue 3 with the v-model directive. Itsynchronizes the inputted value with the reactive properties that we havedefined in our Vue instance.

大多数应用程序都要求用户在表单中输入一些内容。通过 Vue 3 的 v-model 指令，我们可以轻松实现这一点。它将输入值与我们在 Vue 实例中定义的反应属性同步。

Here, we havethe message reactive property, which has been initialized to the “hello world. “string. We can use the same value in the template by setting that as the valueof the v-model directive. It will do the synchronization between the inputtedvalue and the message reactive property so that whatever we type in will bepropagated to the rest of the Vue instance.

在这里，我们有一个消息反应属性，它已被初始化为 "hello world. "字符串。通过将其设置为v-model 指令的值，我们可以在模板中使用相同的值。它将在输入值和消息反应属性之间进行同步，这样我们输入的任何内容都将传播到 Vue 实例的其他部分。

Therefore, the “helloworld.” string is both shown in the input box and the paragraph element. Andwhen we enter something into the input box, it will also be shown in theparagraph element. It will update the value of the message reactive property.This is one great feature that comes with Vue 3 that we will use in manyplaces.

因此，"helloworld. "字符串同时显示在输入框和段落元素中。当我们在输入框中输入内容时，它也会显示在段落元素中。它将更新消息反应属性的值。这是 Vue 3 自带的一个很棒的功能，我们会在很多地方用到它。

示例代码：

Vue App

{{ message }} const App = { data() { return { // 响应式的数据 message: "hello world." }; } };

Vue.createApp(App).mount("#app");