表单收集的信息针对有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. gdb可视化工具gdbgui

    gdbgui是一款很强大的gdb可视化工具,基于浏览器调试很方便.后台是python写的,目前使用起来还有些bug,不过已经很满足了. 官网 https://gdbgui.com Github htt ...

  2. UID卡修改&UID锁死修复

    好久没发RFID类文章,最近有小伙伴问到UID卡的问题,在这里就写一写吧. 首先是UID修改的问题,只要卡是UID卡,就都可以修改UID,首先读卡器连接电脑,卡片放到读卡器上. 然后我们要用一个工具, ...

  3. jquery获取前一个月日期

    一) 重构Date对象: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年 ...

  4. hdu 6216 A Cubic number and A Cubic Number【数学题】

    hdu 6216 A Cubic number and A Cubic Number[数学] 题意:判断一个素数是否是两个立方数之差,就是验差分.. 题解:只有相邻两立方数之差才可能,,因为x^3-y ...

  5. Vue通过input筛选数据

    <div id="app"> <input v-model='search' /> <ul> <li v-for="item i ...

  6. 22、整合mybatis

    搭建环境: 1).创建工程需要的maven坐标 这个mybatis的starter是mybatis官方出的适应springboot 2).数据连接池的使用 引入Druid数据连接池 <depen ...

  7. DataTables.Queryable Sample

    1.DataTables.Queryable的例子项目使用了SQL Server CE数据库,花了几分钟时间转为使用LocalDB. 完整Web.config文件如下: <?xml versio ...

  8. Selenium应用代码（常见封装的方法二）

    滚动窗口: //将滚动条滚到适合的位置 , 方法一 public static void setScroll(WebDriver driver,int height){ try { // String ...

  9. Hibernate之CRUD实践

    Hibernate作为一个高度封装的持久层框架,曾经是非常牛逼的,现在虽然应用不是特别广,比如我前公司主要是做OA的,应用的框架就是Spring+SpringMVC+Hibernate. Hibern ...

  10. 小程序内嵌H5——判断小程序环境的坑

    现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我-- whatever,618要做推广,日期订了,剩下的就只能是排期,定方案,尽可能完成. 最后和产 ...