vue实时获取输入框的值

你可以通过 `v-model` 指令来实时获取输入框的值。例如：

<template>
  <div>
    <input v-model="inputValue" type="text">
    <p>输入的值是：{{ inputValue }}</p>
  </div>
</template>

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

在上面的代码中，我们使用 `v-model` 指令将输入框的值绑定到 `inputValue` 变量上。当输入框的值发生变化时，`inputValue` 变量也会随之更新，因此我们可以通过 `{{ inputValue }}` 插值表达式来实时获取输入框的值。

相关问题

vue获取输入框的值

可以通过v-model指令来实现输入框的双向数据绑定，即输入框的值变化会自动同步到 Vue 实例中绑定的变量中，同时 Vue 实例中绑定的变量变化也会自动同步到输入框中。

例如，我们可以这样声明一个输入框：

<template>
  <div>
    <input type="text" v-model="inputValue" />
    <button @click="handleClick">提交</button>
  </div>
</template>

在 Vue 实例中，我们需要声明一个变量 `inputValue` 来保存输入框的值：

<script>
export default {
  data() {
    return {
      inputValue: "" // 输入框的初始值为空字符串
    };
  },
  methods: {
    handleClick() {
      console.log(this.inputValue); // 输出输入框的值
    }
  }
};
</script>

在 `handleClick` 方法中，我们可以通过 `this.inputValue` 来获取输入框的值。

vue3获取input输入框的值

在Vue3中，你可以使用v-model指令将 input 输入框的值绑定到一个变量上，例如：

<template>
  <div>
    <input v-model="message" type="text">
    <p>输入框的值为: {{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('')
    return {
      message
    }
  }
}
</script>

在这个例子中，我们通过 `v-model="message"` 将输入框的值绑定到了 `message` 变量上，然后在模板中使用插值表达式 `{{ message }}` 显示输入框的值。

如果你想在 JavaScript 中获取输入框的值，可以直接访问 `message.value`。例如：

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('')
    
    function showMessage() {
      alert(message.value)
    }
    
    return {
      message,
      showMessage
    }
  }
}
</script>

<template>
  <div>
    <input v-model="message" type="text">
    <button @click="showMessage">显示输入框的值</button>
  </div>
</template>

在这个例子中，我们定义了一个 `showMessage` 方法来显示输入框的值，然后在模板中通过 `@click="showMessage"` 来绑定按钮的点击事件。当点击按钮时，我们可以通过 `message.value` 来获取输入框的值并弹出。