表单收集的信息针对有text/textarea，checkbox，radio，select

举个例子：

<!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: '',

      info: ''

    },

    methods: {

      handleSubmit () {

        console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)

        alert('提交注册的ajax请求')

      }

    }

  })

</script>

</body>

</html>

运行结果：

提示点：

1.参考官方文档： https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95

2.城市选择时，当选中时，vm.cityId == vm.city.id，依据

3.:key 到底有什么用？按照文档中的意思是：

一个列表项要有一个key值,这个key值如果唯一且未发生变化,则dom就会被复用,反之则需要重新生成。

vuejs中使用v-model对表单数据的收集的更多相关文章

  1. CI中的控制器中要用model中的方法，是统一写在构造器方法中，还是在每一个方法中分别写

    Q: CI中的控制器中要用model中的方法,是统一写在构造器方法中,还是在每一个方法中分别写 A: 建议统一写,CI框架会自动识别已经加载过的类,所以不用担心重复加载的问题 class C_User ...

  2. .NET中 DAL+IDAL+Model+BLL+Web是什么意思

    在.NET中 DAL+IDAL+Model+BLL+Web是什么意思 http://hi.baidu.com/hexiaojian/item/8d0c1a8e648546d75e0ec1e7 其实三层 ...

  3. 推荐系统中的Graph Model

    转自:http://www.cnblogs.com/wentingtu/archive/2012/05/28/2521166.html 推荐中对graph model的研究主要有两个方面,一个是如何构 ...

  4. 008.Adding a model to an ASP.NET Core MVC app --【在 asp.net core mvc 中添加一个model （模型）】

    Adding a model to an ASP.NET Core MVC app在 asp.net core mvc 中添加一个model (模型)2017-3-30 8 分钟阅读时长 本文内容1. ...

  5. Spring框架中ModelAndView、Model、ModelMap区别

    原文地址:http://www.cnblogs.com/google4y/p/3421017.html SPRING框架中ModelAndView.Model.ModelMap区别   注意:如果方法 ...

  6. Systemd初始化进程/RHEL 6系统中System V init命令与RHEL 7系统中systemctl命令的对比

    Linux操作系统的开机过程是这样的,即从BIOS开始,然后进入Boot Loader,再加载系统内核,然后内核进行初始化,最后启动初始化进程.初始化进程作为Linux系统的第一个进程,它需要完成Li ...

  7. SPRING框架中ModelAndView、Model、ModelMap区别及详细分析

    转载内容:http://www.cnblogs.com/google4y/p/3421017.html 1. Model Model 是一个接口, 其实现类为ExtendedModelMap,继承了M ...

  8. Vuejs中slot实现自定义组件header、footer等

    Vuejs中slot实现自定义组件header.footer等 vue中的slot主要负责内容分发,之前有介绍过slot的内容,具体链接:http://www.cnblogs.com/vipzhou/ ...

  9. keil中的memory model

    这两天仿真遇到的怪事真的是一大堆. 还是读写Flash的代码.keil编译OK,但是仿真就是莫名其妙地挂掉出现一些乱七八糟的事情. 后面发现是keil 中的memory model勾选错了,勾选的是l ...

随机推荐

  1. python IO 文件读写

    IO 由于CPU和内存的速度远远高于外设的速度,所以,在IO编程中,就存在速度严重不匹配的问题. 如要把100M的数据写入磁盘,CPU输出100M的数据只需要0.01秒,可是磁盘要接收这100M数据可 ...

  2. sql server alter column 由于一个或多个对象访问此列，ALTER TABLE ALTER COLUMN 失败

    今天在修改一个字段类型,由原来的 varchar(500) 增加到 varchar(1000) 则对应的SQL 语句,执行后如图错误 结果查下来是因为其中一个视图建成了索引视图, 解决办法:先将该视图 ...

  3. 有时间，可以研究哈redis的源代码

    1 2 3 4 留位,以后自己用!

  4. SAP Fiori + Vue = ？

    2017年3月28日,我到国内一个SAP CRM客户那里,同他们的架构师关于二次开发的UI框架选择SAP UI5还是Vue进行了一番探讨.回到SAP研究院之后,我把这个问题扔到了公司的微信群里,引起了 ...

  5. background-color和background-image相关细节

    1.background-color 是以border-box作为他的左上角来定位的 2.background-image 默认是以padding-box作为他的左上角来定位的 3.backgroun ...

  6. JAVA中commons-collections-3.2.1.jar包是干什么用的？

    类似C++中的Boost库,对Java容器类型和算法的补充

  7. xwork-2.1.2.jar与xwork-core-2.1.6.jar的区别是什么？ 在线等待 先谢谢了

    两个包是一样,都是struts2的核心包.不过有时下在的struts2的jar包中只有xwordk-core-2.1.6.jar包.做项目的时候最好两个都导入.

  8. 网易mumu模拟器配置文件和修改adb port位置

    网易mumu模拟器配置文件在安装目录下 emulator\nemu\vms\myandrovm_vbox86下的myandrovm_vbox86.nemu文件中 修改port位置

  9. CPP-基础：临界区

    VC windows api 多线程---临界区 临界区(Critical Section)是一段独占对某些共享资源访问的代码,在任意时刻只允许一个线程对共享资源进行访问.如果有多个线程试图同时访问临 ...

  10. 【转】优秀的Java程序员必须了解GC的工作原理

    一个优秀的Java程序员必须了解GC的工作原理.如何优化GC的性能.如何与GC进行有限的交互,因为有一些应用程序对性能要求较高,例如嵌入式系统.实时系统等,只有全面提升内存的管理效率 ,才能提高整个应 ...