vue.js读取vue界面中输入框的数据

在Vue.js中，要从界面中的输入框（`<input>`或者其他支持`v-model`的元素）读取数据，通常会使用`v-model`指令。`v-model`是Vue提供的双向数据绑定机制，它将元素的内容与Vue实例中的某个数据属性关联起来。以下是基本步骤：

1. 首先，在HTML模板中添加一个输入框并设置`v-model`：

<input type="text" v-model="username">

这里的`username`应该是在Vue实例中的data对象里的一个属性名。

2. 在对应的Vue组件里，定义`data()`函数，并初始化`username`变量：

export default {
  data() {
    return {
      username: ''
    }
  },
  //...
}

3. 当用户在输入框中输入内容时，`username`的数据会实时更新，你可以直接在JavaScript代码中访问这个值：

console.log(this.username); // 获取当前输入框的值

或者在模板中使用`{{ username }}`显示该值：

<p>User entered: {{ username }}</p>

当数据变化时，Vue会在背后自动处理DOM更新，无需手动触发渲染。