vuejs中使用v-model对表单数据的收集
表单收集的信息针对有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对表单数据的收集的更多相关文章
- CI中的控制器中要用model中的方法,是统一写在构造器方法中,还是在每一个方法中分别写
Q: CI中的控制器中要用model中的方法,是统一写在构造器方法中,还是在每一个方法中分别写 A: 建议统一写,CI框架会自动识别已经加载过的类,所以不用担心重复加载的问题 class C_User ...
- .NET中 DAL+IDAL+Model+BLL+Web是什么意思
在.NET中 DAL+IDAL+Model+BLL+Web是什么意思 http://hi.baidu.com/hexiaojian/item/8d0c1a8e648546d75e0ec1e7 其实三层 ...
- 推荐系统中的Graph Model
转自:http://www.cnblogs.com/wentingtu/archive/2012/05/28/2521166.html 推荐中对graph model的研究主要有两个方面,一个是如何构 ...
- 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. ...
- Spring框架中ModelAndView、Model、ModelMap区别
原文地址:http://www.cnblogs.com/google4y/p/3421017.html SPRING框架中ModelAndView.Model.ModelMap区别 注意:如果方法 ...
- Systemd初始化进程/RHEL 6系统中System V init命令与RHEL 7系统中systemctl命令的对比
Linux操作系统的开机过程是这样的,即从BIOS开始,然后进入Boot Loader,再加载系统内核,然后内核进行初始化,最后启动初始化进程.初始化进程作为Linux系统的第一个进程,它需要完成Li ...
- SPRING框架中ModelAndView、Model、ModelMap区别及详细分析
转载内容:http://www.cnblogs.com/google4y/p/3421017.html 1. Model Model 是一个接口, 其实现类为ExtendedModelMap,继承了M ...
- Vuejs中slot实现自定义组件header、footer等
Vuejs中slot实现自定义组件header.footer等 vue中的slot主要负责内容分发,之前有介绍过slot的内容,具体链接:http://www.cnblogs.com/vipzhou/ ...
- keil中的memory model
这两天仿真遇到的怪事真的是一大堆. 还是读写Flash的代码.keil编译OK,但是仿真就是莫名其妙地挂掉出现一些乱七八糟的事情. 后面发现是keil 中的memory model勾选错了,勾选的是l ...
随机推荐
- Windows下Redis集群配置
Redis集群学习地址:http://blog.csdn.net/dc_726/article/details/11694437 Windows-32系统下搭建Redis集群 一.Redis主从同步原 ...
- 【2017.09.15 智能驾驶/汽车电子】汽车高级驾驶辅助ADAS常用传感器厂商:激光雷达篇
不定期更新,主要是汇总Internet上的激光雷达厂商资讯,不涉及技术,以备参考. 1. Innoviz:固态激光雷达公司 新闻链接:http://36kr.com/p/5092055.html 激光 ...
- February 15 2017 Week 7 Wednesday
Youth is not a time of life, it is a state of mind. 青春不是一段年华,而是一种心境. Likewise, maturity is not a tim ...
- Microsoft Visual C++ 2005 Redistributable 无法卸载问题解决办法
今日遇到一个问题,Microsoft Visual C++ 2005 Redistributable 无法卸载,弹出的对话框如下所示: 试了一些网上的方法,比如下载vcredist_x86.exe,解 ...
- 关于HiddenHttpMethodFilter
这个类的代码比较少,所以把整个类的代码都复制过来.在注释中添加上自己的理解. public class HiddenHttpMethodFilter extends OncePerRequestFil ...
- log4j框架logger的继承关系以及使用场景
log4j框架logger的继承关系以及使用场景 log4j日志框架logger是存在继承关系的,我们一般都会在log4j.properties文件中定义log4j.rootLogger.其他所有lo ...
- BZOJ2160:拉拉队排练(Manacher)
Description 艾利斯顿商学院篮球队要参加一年一度的市篮球比赛了.拉拉队是篮球比赛的一个看点,好的拉拉队往往能帮助球队增加士气,赢得最终的比赛.所以作为拉拉队队长的楚雨荨同学知道,帮助篮球队训 ...
- Linux学习总结(八)-磁盘格式化,挂载,swap扩容
上次我们学习了磁盘分区,磁盘分区完后还不能直接使用,需要对分区进行格式化,载入某个类型的文件系统,然后挂载到相应目录下才可使用. 一 磁盘格式化 格式化命令: mke2fs -t [ext2 ext3 ...
- Kali-linux准备内核头文件
内核头文件是Linux内核的源代码.有时候,用户需要编译内核头文件代码,为以后使用内核头文件做准备,本节将介绍编译内核头文件的详细步骤. 准备内核头文件的具体操作步骤如下所示. (1)更新软件包列表. ...
- 通过Field (反射)给私有字段赋值
public class Person { public String name; public char sex; private int age; public String getName() ...