表单收集的信息针对有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. February 13 2017 Week 7 Monday

    Don't trouble trouble until trouble troubles you. 不要自寻烦恼. It is the best way to live an easy life if ...

  2. node-7.2.1 already installed, it's just not linked

    直接在terminal下运行以卸载node和nvm: sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,shar ...

  3. Parcel是个好玩意儿

    今天学习了一下Parcel打包工具,确实感觉十分简单易上手,基本不需要配置,未来可能是一个主流的打包工具.相比较于Webpack来说,Parcel简直是毫无难度.接下来总结一下我的学习收获. 1 安装 ...

  4. MySQL语法二：数据操纵语句

    数据操纵语句DML(SELECT,DELETE,UPDATE,INSERT) 一. 数据操纵语句是对数据表中的内容进行操作.比如对某个表中的某条记录或者多条记录进行增删改查操作. 一).查询 SELE ...

  5. CoreAnimation confusion: CATransaction vs CATransition vs CAAnimationGroup?

    http://stackoverflow.com/questions/14042755/coreanimation-confusion-catransaction-vs-catransition-vs ...

  6. UVa 12034 - Race（递推 + 杨辉三角）

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  7. JQuery的异步回调支持 - Promise、Deferred

    1.Deferred对象: 一般在函数内部进行声明,并在运行过程中改变其状态,例如成功或失败,最终返回Promise对象用于状态监听. 主要方法: Deferred.resolve(param...) ...

  8. MyBatis(1)优点&介绍&工程

    本次全部学习内容:MyBatisLearning 一:jabc的相关说明: jdbc编程步骤: 加载数据库驱动 创建并获取数据库链接 创建jdbc statement对象 设置sql语句 设置sql语 ...

  9. 【转】Spring Boot Profile使用

    http://blog.csdn.net/he90227/article/details/52981747 摘要: spring Boot使用@Profile注解可以实现不同环境下配置参数的切换,任何 ...

  10. 集合异常之Set接口

    Set接口,它里面的集合,所存储的元素就是不重复的,通过元素的equals方法,来判断是否为重复元素. HashSet存储JavaAPI中的类型元素 给HashSet中存储JavaAPI中提供的类型元 ...