vue获取input输入框的内容

Vue中获取input输入框的内容可以通过v-model指令来实现。v-model指令可以实现双向绑定，即在input输入框中输入内容时，Vue会自动将内容存储在指定的data属性中；同时，当Vue中的data属性发生改变时，input输入框的内容也会自动更新。

下面我们来详细讲解一下如何使用v-model来获取input输入框的内容。

1. 在Vue实例的data选项中声明一个属性来存储input输入框的内容。例如，可以在Vue实例的data中添加一个属性名为inputValue：

```javascript

data: {

inputValue: ''

}

```

2. 在input输入框中添加v-model指令，并将它的值绑定到data中声明的属性。例如，可以将input输入框的value属性绑定到inputValue：

```html

```

3. 现在，当input输入框中的内容发生改变时，Vue会自动将新的内容存储在inputValue属性中。

```html

{{inputValue}}

```

在上面的示例中，当在input输入框中输入内容时，即可在下方的p标签中看到输入框中的内容。

除了在input输入框中使用v-model指令，还可以通过`this.$refs`来获取输入框的内容。

在Vue实例中的methods选项中，可以定义一个方法来获取输入框的内容。例如：

```javascript

methods: {

getInputValue() {

const inputValue = this.$refs.myInput.value;

console.log(inputValue);

}

}

```

然后在input输入框中使用ref属性给输入框命名，例如：

```html

获取输入框的内容

```

在点击"获取输入框的内容"按钮时，调用getInputValue方法即可获取到输入框的内容，并将其打印到控制台上。

综上所述，Vue获取input输入框的内容有两种方法：一种是通过v-model指令实现双向绑定，另一种是通过`this.$refs`来获取输入框的内容。根据实际的需求选择合适的方法。