vue指令v-model(双向数据绑定)自动收集数据

最新推荐文章于 2024-09-04 16:06:24 发布

halo1416

最新推荐文章于 2024-09-04 16:06:24 发布

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签： vue v-model 表单数据

本文链接：https://blog.csdn.net/halo1416/article/details/83309650

版权

vue 专栏收录该内容

48 篇文章 5 订阅

订阅专栏

前言：表单提交数据在网站页面中是十分常见的，而这个表单数据的获取在原生写法甚至于JQ都是比较麻烦的（首先需要获取DOM，然后获取值）。

但是，在vue的项目环境下，表单数据的收集又该怎么办呢？（这种自己写input元素的方法在实际项目中是不常用的哈，因为一般我们都会用一个UI库，方便而快捷！）

首先，看一下最后的效果：

然后，上一下完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08_表单输入绑定</title>
</head>
<body>
<div id="demo">
  <form action="/xxx" @submit.prevent="handleSubmit">
    <span>用户名: </span>
    <input type="text" v-model="username"><br>

    <span>密码: </span>
    <input type="password" v-model="pwd"><br>

    <span>性别: </span>
    <input type="radio" id="female" value="女" v-model="sex">
    <label for="female">女</label>
    <input type="radio" id="male" value="男" v-model="sex">
    <label for="male">男</label><br>

    <span>爱好: </span>
    <input type="checkbox" id="basket" value="basket" v-model="likes">
    <label for="basket">篮球</label>
    <input type="checkbox" id="foot" value="foot" v-model="likes">
    <label for="foot">足球</label>
    <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
    <label for="pingpang">乒乓</label><br>

    <span>城市: </span>
    <select v-model="cityId">
      <option value="">未选择</option>
      <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
    </select><br>
    <span>介绍: </span>
    <textarea rows="10" v-model="info"></textarea><br><br>

    <input type="submit" value="注册">
  </form>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      username: '',
      pwd: '',
      sex: '男',
      likes: ['foot'],
      allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
      cityId: '2',
      info: ''
    },
    methods: {
      handleSubmit () {
        console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
        alert('提交注册的ajax请求')
      }
    }
  })
</script>
</body>
</html>

v-model自动收集数据使用总结：

1. 在input标签中使用 v-model 指令后，input的value属性将自动和v-model的值想绑定（简单来说：v-model绑定的是input的value属性）

2. 在绑定type为radio和checkbox 的input标签的时候，也必须给这两种类型的input添加value属性

3. type为radio的input（单选框），必须一组单选框v-model的值的相同的，而最后的值是选择的单选框对应的value值

4. type为checkbox的input（复选框），必须一组复选框v-model的值的相同的，而最后的值是选择的复选框对应的value值（数组）

5. select（下拉框）中使用 v-model 时（ v-model 是使用在select标签上，即父级标签上），需要在其子标签 option 中设置value值（一般option都是遍历一个数组而产生）。而最后的值是被选中的option（子标签）对应的 value 值。（一般是option对应的id）

6. .prevent : 阻止事件的默认行为 event.preventDefault()

.stop : 停止事件冒泡 event.stopPropagation()

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！