vue 中如何获的input的value值
时间: 2023-09-22 13:07:27 浏览: 72
在 Vue 中获取 input 元素的值,可以通过 `v-model` 指令或者通过 `$refs` 来获取。
1. 使用 `v-model` 指令
可以在 input 元素上使用 `v-model` 指令,将 input 的 value 和一个 Vue 组件中的 data 绑定起来。例如:
```html
<template>
<div>
<input v-model="message" />
<button @click="showMessage">显示消息</button>
</div>
</template>
<script>
export default {
data() {
return {
message: '',
};
},
methods: {
showMessage() {
alert(this.message);
},
},
};
</script>
```
2. 使用 `$refs`
可以通过在 input 元素上添加 `ref` 属性,然后在 Vue 组件中使用 `$refs` 对象来获取 input 元素的值。例如:
```html
<template>
<div>
<input ref="myInput" />
<button @click="showMessage">显示消息</button>
</div>
</template>
<script>
export default {
methods: {
showMessage() {
alert(this.$refs.myInput.value);
},
},
};
</script>
```
以上两种方法都可以获取 input 元素的值,具体使用哪种方法取决于具体场景和需求。