表单收集的信息针对有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. Dz7.2 从获取uc key到getshell

    0x01下午在群里看到的 问下朋友大概 然后用不生不熟的sqlmap在那跑–表能跑的出 列就GG了 然后没辙–晚上跑各大论坛逛了遍果然大神多 就慢慢的研究下了下 看了pt0n大牛的分析文 真心感叹这洞 ...

  2. 区间DP学习总结

    这段时间学习了区间DP,所以试着把学到的东西稍作总结,以备不时之需. 学习区间DP首先要弄清区间DP是为了解决什么问题:一般的DP主要是特征是一次往往只操作一个数值或者存储可以不连续的物品的状态(比如 ...

  3. 完整详解GCD系列（三）dispatch_group

    http://blog.csdn.net/hello_hwc/article/details/41409135 一.dispatch_group把一组任务提交到队列中,这些队列可以不相关,然后坚挺这组 ...

  4. mysqlslap执行基准测试

    查看mysqlslap所支持的主要参数配置及说明如下 -a, --auto-generate-sql 由系统自动生成SQL脚本进行测试 Generate SQL where not supplied ...

  5. 使用 Open Live Writer 创建我的第一个博文

    希望能在此记录我的技术开发过程. 请记住我的博客首页为:https://www.cnblogs.com/unrulife/ 期待在博客园遇到志同道合的朋友! 希望在博客园开启技术生涯的新篇章!

  6. 快速理解Event事件

    浏览器事件是所有web程序的核心.javascript与HTML之间的交互是通过事件实现的.通过这些事件我们定义将要发生的行为.事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信. 1. ...

  7. 使用命令导入、导出mysql数据

    1.导出全部数据库 利用mysqldump的—all-databases参数可以一口气把你数据库root用户下的所有数据库一口气导出到一个sql文件里.然后,重装系统后使用source命令可以再一口气 ...

  8. [转]asp.net Request、Response 响应在此上下文中不可用

    这个问题一般是在页面中使用了Respons.Write()方法,虽然是继承了System.Web.UI.Page.但System.Web.UI.Page下的Response只有在asp.net页面里才 ...

  9. git日常基本用法

    git作为项目管理现在已经是越来越广泛应用,结合自己平时的一些基本操作加上git说明文档里面的一些补充,我总结了一下git的基本用法: mkdir project # 创建项目目录 cd projec ...

  10. 6.可见性关键字（volidate）

    可见性关键字(volidate): 如果对java内存模型了解较清楚的话,我们知道每个线程都会被分配一个线程栈. 线程栈里存的是对象的引用,但当前cache缓存机制,可能会把数据拷贝. 就是,命中缓存 ...