vue获取input输入框的内容

// 在 Vue.js 中获取 input 输入框的内容，可以通过 v-model 指令来实现双向数据绑定。
// 下面是一个简单的示例代码：

<template>
  <div id="app">
    <!-- 使用 v-model 将输入框的值与 data 中的 message 绑定 -->
    <input type="text" v-model="message" placeholder="请输入内容">
    <!-- 显示输入框中的内容 -->
    <p>你输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个 message 变量用于存储输入框的值
      message: ''
    };
  }
};
</script>

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

解释说明：

1. v-model：这是 Vue.js 的指令，用于在表单元素和应用程序状态之间创建双向数据绑定。当用户在输入框中输入内容时，message 变量会自动更新；反之，当 message 变量发生变化时，输入框的内容也会相应更新。
2. data 函数：返回一个对象，该对象包含了组件的状态。在这个例子中，message 是一个字符串类型的变量，用于存储输入框的内容。
3. 模板部分：通过 <input> 标签的 v-model 指令将输入框的内容与 message 变量绑定，并通过插值表达式 {{ message }} 显示输入框的内容。

如果你需要在特定事件（如按钮点击）中获取输入框的内容，也可以通过监听事件并访问 this.message 来实现。