vue怎么获取表单信息

通过 vue.js 获取表单信息可采用两种方式：使用 v-model 指令实现双向绑定，方便快捷，但仅限于表单元素。借助 $refs 属性获取子元素引用，更加灵活，但需要手动获取值。

如何使用 Vue.js 获取表单信息

使用 Vue.js 获取表单信息有两种主要方法：

1. v-model 指令

v-model 指令为表单元素（input、textarea 等）提供双向绑定，这意味着在 Vue 组件中修改元素的值也会更新表单输入，反之亦然。

语法：

示例：

<template><input v-model="name"></template><script>
export default {
  data() {
    return {
      name: ''
    }
  }
}
</script>

登录后复制

2. $refs 属性

$refs 属性提供对 Vue 组件内部子元素的引用，包括表单元素。

语法：

this.$refs.元素名称

示例：

<template><input ref="nameInput"></template><script>
export default {
  mounted() {
    console.log(this.$refs.nameInput.value)
  }
}
</script>

登录后复制

比较

• v-model：双向绑定，更方便，但只适用于表单元素。
• $refs：可以获取任意子元素的引用，更灵活，但需要手动获取值。

获取特定表单元素的值

假设您有以下表单：

登录后复制

使用 v-model：

export default {
  data() {
    return {
      name: '',
      email: ''
    }
  }
}

登录后复制

使用 $refs：

export default {
  mounted() {
    console.log(this.$refs.name.value)
    console.log(this.$refs.email.value)
  }
}

登录后复制

以上就是vue怎么获取表单信息的详细内容，更多请关注叮当号网其它相关文章！