vue中关于表单数据的绑定

最新推荐文章于 2025-02-21 01:28:03 发布

奥利给~YY

最新推荐文章于 2025-02-21 01:28:03 发布

阅读量1.7k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_69507480/article/details/125194464

版权

本文探讨Vue框架中表单数据的绑定，重点讲解了表单元素如何实现数据的双向绑定，包括其原理（数据劫持和对象代理）以及在实际应用中遇到的问题，如文件域绑定获取到的是文件路径而非二进制数据。尽管不推荐直接操作DOM，但在特定场景下，仍可能需要借助对象来处理数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单数据绑定

Vue针对网页交互中的表单元素的数据处理，提供了专门的数据处理指令：v-model，实现了逻辑数据和网页视图之间的双向绑定，对表单中操作的数据有很大的功能性提升

Vue框架中的数据，提供了声明式渲染特性，数据的双向绑定是Vue非常重要的特性之一，专业术语中被称为MVVM，Vue2.x底层通过数据劫持的方式实现的、Vue3.x底层是通过对象代理的方式实现！

（1）表单元素数据绑定

Vue框架对表单元素的支持非常友好的

<!DOCTYPE html>
<html lang='zh'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
</head>
<body>
  <div id='app'>
    <form>
      <div>
        <label>账号：</label>
        <input type="text" v-model="userForm.username">
        <span>val:{{ userForm.username }}</span>
      </div>
      <div>
        <label>密码：</label>
        <input type="password" v-model="userForm.password">
        <span>val:{{ userForm.password }}</span>
      </div>
      <div>
        <label>性别：</label>
        <input type="radio" name="gender" v-model="userForm.gender" value="男">男
        <input type="radio" name="gender" v-model="userForm.gender" value="女">女
        <span>val:{{ userForm.gender }}</span>
      </div>
      <div>
        <label>年龄：</label>
        <input type="number" v-model="userForm.age">
        <span>val:{{ userForm.age }}</span>
      </div>
      <div>
        <label>爱好：</label>
        <input type="checkbox" v-model="userForm.fav" value="LOL">LOL
        <input type="checkbox" v-model="userForm.fav" value="英雄联盟">英雄联盟
        <input type="checkbox" v-model="userForm.fav" value="艾尔登法环">艾尔登法环
        <span>val:{{ userForm.fav }}</span>
      </div>
      <div>
        <label>生日：</label>
        <input type="date" v-model="userForm.birthday">
        <span>val:{{ userForm.birthday }}</span>
      </div>
      <div>
        <label>地址：</label>
        <select v-model="userForm.address">
          <option value="郑州">郑州</option>
          <option value="广州">广州</option>
          <option value="杭州">杭州</option>
          <option value="柳州">柳州</option>
        </select>
        <span>val:{{ userForm.address }}</span>
      </div>
      <div>
        <label>介绍：</label>
        <textarea v-model="userForm.intro" cols="30" rows="5"></textarea>
        <span>val:{{ userForm.intro }}</span>
      </div>
      <div>
        <label>头像：</label>
        <input type="file" v-model="userForm.header">
        <span>val:{{ userForm.header }}</span>
      </div>
      <button @click="submit">提交</button>
    </form>
  </div>

  <script src='./vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        userForm: {
          username: '', // 账号- 文本输入框
          password: '', // 密码- 密码输入框
          gender: ''  , // 性别- 单选按钮
          age: 0,       // 年龄- 数值输入框
          fav: [],      // 爱好- 复选框
          birthday: '', // 生日- 日期选择框
          address: '',  // 地址- 下拉列表框
          intro: '',    // 介绍- 多行文本框/文本域
          header: ''   // 头像- 文件域
        }
      },
      watch: {},
      computed: {},
      methods: {
        submit() {
          console.log("提交表单", this.userForm)
        }
      }
    })
  </script>
  
</body>
</html>

实际绑定效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xYmIOmpi-1654700648621)(assets/image-20220607163337434.png)]

备注：关于文件域的绑定，我们需要的是二进制文件，但是v-model绑定得到了一个路径，存在问题！

注意：尽管Vue不建议/不推荐操作DOM对象，但是某些特殊场景中需要通过DOM对象完成数据操作

Vue中给标签提供了一个ref属性，用于直接操作标签的DOM对象

<input type="file" ref="refImg" @change="change"/>

<script>
	const app = new Vue({
        el: "#app",
        data: {
            header: ''
        },
        methods: {
            change() {
                // 获取文件域DOM对象，获取二进制图片
                // this:表示当前Vue实例对象
                // this.$refs：获取当前实例对象绑定的标签内部，所有带ref属性的标签
                // this.$refs.refImg：获取当前页面中 ref="refImg"的标签DOM对象
                // this.$refs.refImg === DOM对象
                // DOM对象.files[0]：获取文件域中选择的二进制文件
                let himg = this.$refs.refImg.files[0]
                // 给绑定的变量赋值
                this.header = himg
            }
        }
    })
</script>

中选择的二进制文件

            let himg = this.$refs.refImg.files[0]
            // 给绑定的变量赋值
            this.header = himg
        }
    }
})

```

vue中关于表单数据的绑定

表单数据绑定

（1） 表单元素数据绑定

（1）表单元素数据绑定