vue_表单 input 的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_ form 表单的自动数据收集</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div id="test">
<form action="javascript:">
<label>
<span>用户名： </span>
<input v-model="user.name" type="text" />
</label><br/><br/><br/> <label>
<span>密码： </span>
<input v-model="user.password" type="text" />
</label><br/><br/><br/> <span>性别： </span>
<label>男
<input v-model="user.gender" name="gender" type="radio" value="boy"/>
</label>
<label>女
<input v-model="user.gender" name="gender" type="radio" value="girl"/>
</label><br/><br/><br/> <span>爱好： </span>
<label>跳水
<input v-model="user.hobby" name="jumpWater" type="checkbox" value="跳水"/>
</label>
<label>滑翔
<input v-model="user.hobby" name="fly" type="checkbox" value="滑翔"/>
</label>
<label>蹦极
<input v-model="user.hobby" name="jumpHeight" type="checkbox" value="蹦极"/>
</label><br/><br/><br/> <span>城市： </span>
<select v-model="user.city">
<option value="BJ">北京</option>
<option value="HN">湖南</option>
<option value="SZ">深圳</option>
<option value="ZJ">浙江</option>
</select><br/><br/><br/> <label>
<span>介绍： </span>
<textarea v-model="user.words" cols="30" rows="2"></textarea>
</label><br/><br/><br/> <label>
<input @click="register" type="submit" value="注册" />
</label> </form>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#test",
data:{
user:{
name: "admin",
gender: "boy",
hobby: ["跳水"],
city: "HN"
}
},
methods:{
register(){
console.log(this.user)
}
}
})
</script>
</body>
</html>
vue_表单 input 的绑定的更多相关文章
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- vue2.0 之表单控件绑定
表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v- ...
- form 表单<input type="button" value="登录" onclick="loginSubmit ()"/> 点击提示 Uncaught TypeError: loginSubmit is not a function
在网上搜了一堆东东,仔细看了一下,再加上实验,发现原因出在<form>中. <form method="post"> <button type=&qu ...
- vue表单输入的绑定
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- Angular11 模板表单、响应式表单（自定义验证器）、HTTP、表单元素双向绑定
1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...
- vue 表单输入与绑定 v-model
vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...
- 16Vue 表单的输入绑定
基础用法 你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. 它会根据控件类型自动选取正确的 ...
- 表单控件绑定v-model
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
随机推荐
- postgreSql 常用操作总结
0. 启动pgsl数据库 pg_ctl -D /xx/pgdata start 1. 查看pgsl版本 pg_ctl --version 1. 命令行登录数据库 psql -U username -d ...
- deepin 下安装goland中文字体显示全是方块
下载中文字体 apt-get install ttf-arphic-uming xfonts-intl-chinese 替换goland的汉化包,两个jar包.https://blog.csdn.ne ...
- httpClient4.5 closeableHttpClient用法
HttpClient一 简介1.尽管java.net包提供了基本通过HTTP访问资源的功能,但它没有提供全面的灵活性和其它很多应用程序需要的功能.HttpClient就是寻求弥补这项空白的组件,通过提 ...
- Educational Codeforces Round 55 (Rated for Div. 2)
D. Maximum Diameter Graph 题意 给出每个点的最大度,构造直径尽可能长的树 思路 让度数大于$1$的点构成链,考虑是否能在链的两端加度为$1$的点 代码 #include &l ...
- Coursera, Big Data 3, Integration and Processing (week 1/2/3)
This is the 3rd course in big data specification courses. Data model reivew 1, data model 的特点: Struc ...
- notepad++ 代码注释快捷键
在用notepad++进行代码编辑的过程中 单行.多行注释 //方式 :ctrl+k 取消单行.多行.区块注释 :ctrl+sh ...
- Leetcode#88. Merge Sorted Array（合并两个有序数组）
题目描述 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量分别为 m ...
- rocketmq 4.2.0集群配置
采用的是2m-2s-async模式 1. 修改每台机器的/etc/hosts 文件,增加如下内容 192.168.1.100 nameserver1192.168.1.102 nameserver ...
- workqueue --最清晰的讲解【转】
转自:https://www.cnblogs.com/zxc2man/p/6604290.html 带你入门: 1.INIT_WORK(struct work_struct *work, void ( ...
- 我的pwn笔记
0.64位程序参数一次保存在RDI,RSI,RDX,RCX,R8和 R9,具体见图 windows64位调用约定 1.<_libc_csu_init>有一些万能gadget,汇编如下 #! ...