vue input

作者：稍纵即逝发布日期:2026-06-19 浏览:69

<template>
  <div>
    <input v-model="message" placeholder="输入一些内容">
    <p>你输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

<style scoped>
/* 你可以在这里添加一些样式 */
</style>

解释说明：

v-model：这是 Vue 中用于双向数据绑定的指令。它将输入框的值与组件的数据属性 message 绑定在一起，当用户在输入框中输入内容时，message 的值会自动更新；反之，如果 message 的值发生变化，输入框中的内容也会随之更新。
data()：定义了组件的初始状态，这里我们定义了一个名为 message 的属性，并将其初始值设为空字符串。
模板部分：包含一个输入框和一个段落元素。输入框通过 v-model 指令与 message 绑定，段落元素则用于显示当前的 message 值。

如果你需要更多关于 Vue 的 input 组件的信息或有其他问题，请随时告诉我！

上一篇：vue keepalive

下一篇：ant vue design