vue如何获取input输入框的值

1033
2023/7/17 22:50:03
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

在Vue中获取input输入框的值可以通过v-model指令来实现。以下是一个示例:

<template>

  <div>

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

    <button @click="getValue">获取值</button>

  </div>

</template>

<script>

export default {

  data() {

    return {

      inputValue: ''

    }

  },

  methods: {

    getValue() {

      console.log(this.inputValue);

    }

  }

}

</script>

在上面的示例中,我们使用了v-model指令将input元素与inputValue数据属性绑定在一起。这意味着每当用户在输入框中输入内容时,inputValue的值也会更新。

出于演示目的,我们还添加了一个按钮,点击按钮后调用getValue方法,该方法会打印出当前inputValue的值。

通过这种方式,您可以在Vue中轻松地获取输入框的值。


辰迅云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读: vue页面传值有哪些方式