vue怎么获取表单信息

百变鹏仔 3个月前 (09-25) #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：

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

使用 $refs：

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

文章推荐