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

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

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

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

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

  
  



  

    用户名: 
    


    密码: 
    


    性别: 
    
    女
    
    男


    爱好: 
    
    篮球
    
    足球
    
    乒乓


    城市: 
    
      未选择
      {{city.name}}
    

    介绍: 
    



    
  

 

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()

 

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