vue3 input

// Vue 3 Input 示例代码

<template>
  <div>
    <!-- v-model 指令用于在表单输入元素上创建双向数据绑定 -->
    <input v-model="message" placeholder="请输入内容">
    <p>你输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用 ref 创建一个响应式变量 message
    const message = ref('');

    return {
      message
    };
  }
};
</script>

<style scoped>
/* 添加一些简单的样式 */
input {
  padding: 8px;
  margin-bottom: 10px;
  font-size: 16px;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 <input> 元素，并通过 v-model 指令将其与 message 变量进行双向绑定。
   • 用户在输入框中输入的内容会实时更新到 message 变量中，同时页面中的 <p> 标签也会同步显示最新的输入内容。

2. 脚本部分 (<script>):

   • 使用了 Vue 3 的组合式 API (setup 函数)。
   • 通过 ref 创建了一个响应式变量 message，初始值为空字符串。
   • 将 message 返回，使其可以在模板中使用。

3. 样式部分 (<style scoped>):

   • 添加了一些简单的样式来美化输入框和文本显示区域。