vue 输入框

<template>
  <div>
    <!-- 这是一个简单的 Vue 输入框示例 -->
    <input v-model="message" placeholder="请输入内容">
    <p>你输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个名为 message 的响应式数据属性，初始值为空字符串
      message: ''
    };
  }
};
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>

解释说明：

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

   • 使用了 <input> 标签创建一个输入框，并通过 v-model 指令将其与 message 数据属性进行双向绑定。
   • 当用户在输入框中输入内容时，message 的值会自动更新；反之，如果 message 的值发生变化，输入框中的内容也会相应更新。
   • 使用 <p> 标签显示当前输入的内容。

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

   • 在 data 函数中定义了一个名为 message 的响应式数据属性，初始值为空字符串。
   • message 的值会在用户输入时动态更新，并且可以在模板中使用。

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

   • 可以根据需要为组件添加样式，scoped 属性确保这些样式只应用于当前组件。