Vue学习笔记使用系列一【表单】
脚手架的搭建,请查看另外一篇日记:https://www.cnblogs.com/Fengge518/p/11837078.html
1:直接代码了
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <script src="../assets/vue.js"></script>
9 <script>
10 window.onload = function() { //1 沒有寫加載的函數,導致出不來
11 var app = new Vue({ //2寫錯成 new app去了
12 el: "#myapp", //3少了一個#號
13 data: {
14 uname: "",
15 upwd: "",
16 sex: "男",
17 mylove: [],
18 youcountry: "",
19 remark: ""
20 },
21 methods: function() {}
22 })
23 }
24 </script>
25 </head>
26
27 <body>
28 <form action="" method="post">
29 <div id="myapp">
30 <div>
31 <p>你填寫的信息有:姓名:{{uname}},密碼:{{upwd}}</p>
32 <p>性別:{{sex}} ,我比較喜歡的蔬菜:{{mylove}}</p>
33 <p>喜歡旅遊的國家: {{youcountry}},其他備註的信息: {{remark}}</p>
34 </div>
35 <fieldset>
36 <legend>
37 您的信息:
38 </legend>
39 <div><label>姓名:<input type="text" v-model="uname"/></label></div>
40 <div><label>密碼:<input type="password" v-model="upwd"></label></div>
41 <div>
42 <p>您的性別:</p>
43 <label>男:<input type="radio" value="男" v-model="sex"></label>
44 <label>女<input type="radio" value="女" v-model="sex"></label></div>
45 <div>
46 <p>你喜歡吃啥蔬菜:</p>
47 <label>西紅柿<input type="checkbox" value="西紅柿" v-model="mylove"></label>
48 <label>苦瓜<input type="checkbox" value="苦瓜" v-model="mylove"></label>
49 <label>洋蔥<input type="checkbox" value="洋蔥" v-model="mylove"></label>
50 <label>白菜<input type="checkbox" value="白菜" v-model="mylove"></label>
51 </div>
52 <div>
53 <label>你喜歡去哪個國家旅遊:</label>
54 <select v-model="youcountry">
55 <option value=""></option>
56 <option value="中國">中國</option>
57 <option value="巴基斯丹">巴基斯丹</option>
58 <option value="塞爾維亞">塞爾維亞</option>
59 <option value="朝鮮">朝鮮</option>
60 </select>
61 </div>
62 <div>
63 <p>備註的信息:</p>
64 <textarea v-model="remark" id="" cols="30" rows="10"></textarea></div>
65 </fieldset>
66 </div>
67 </form>
68 </body>
69
70 </html>
2:效果截图
Vue学习笔记使用系列一【表单】的更多相关文章
- Django学习笔记(五)—— 表单
疯狂的暑假学习之 Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path ...
- Flutter学习笔记(13)--表单组件
如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输 ...
- ng2 学习笔记(二)表单及表单验证
在上一篇文章中提到了表单,只说了表单的数据绑定,这一篇文章主要讲一下表单验证,为什么把表单单独拿出来学习,主要是因为,表单是商业应用的支柱,我们用它来执行登录.求助.下单.预订机票.安排会议,以及不计 ...
- Vue.js 学习笔记 第6章 表单与v-model
本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- SpringMVC:学习笔记(5)——数据绑定及表单标签
SpringMVC——数据绑定及表单标签 理解数据绑定 为什么要使用数据绑定 基于HTTP特性,所有的用户输入的请求参数类型都是String,比如下面表单: 按照我们以往所学,如果要获取请求的所有参数 ...
- HTML&CSS基础学习笔记1.26-input重置表单
重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[ty ...
- HTML之学习笔记(九)表单
html的表单标签是一个系列,用开闭的<form>标签包裹起来的组合.表单的作用是将我们要向服务器提交数据的数据包含起来,然后提交到服务器处理.(使用表单是浏览器提交客户端数据到服务端的方 ...
- 【Spring学习笔记-MVC-11--】Spring MVC之表单标签
一.使用方法 1.要使用Spring MVC提供的表单标签,首先需要在视图页面添加: <%@ taglib prefix="form" uri="http://ww ...
- html+css学习笔记 5[表格、表单]
表格 -- 默认样式重置 表格标签: table 表格 thead 表格头 tbody 表格主体 tfoot 表格尾 tr 表格行 th 元素定义表头 ...
随机推荐
- SecureCRT 关键字高亮显示
grep命令红色高亮关键字 1. 左边侧栏 Session Manage 右键Sessions --Properties 2 Terminal--Appearance Current color s ...
- 把Autofac玩的和javaSpring一样6
大家好,今天来介绍我开源的一个autofac.Annotation项目 源码:https://github.com/yuzd/Autofac.Annotation 本项目是autofa的一个扩展组件, ...
- 源码浅入浅出 Java ConcurrentHashMap
从源码的角度深入地分析了 ConcurrentHashMap 这个线程安全的 HashMap,希望能够给你一些帮助. 老读者就请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程 ...
- 数据去重Distinct,IEqualityComparer,IEquatable
很多情况下我们查询数据需要去重重复数据,下面就记录三个去重的方法. Distinct 最基本的去重形式,直接查询出数据后使用Distinct方法进行字段去重. var strList = new Li ...
- Android Studio Eclipse运行时出现 finished with non-zero exit value 2 错误解决方法
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 微博:http://weibo.com/mcxiaobing Error:Ex ...
- AcWing 285. 没有上司的舞会(树形dp入门)
Ural大学有N名职员,编号为1~N. 他们的关系就像一棵以校长为根的树,父节点就是子节点的直接上司. 每个职员有一个快乐指数,用整数 HiHi 给出,其中 1≤i≤N1≤i≤N. 现在要召开一场周年 ...
- 网址中的静态资源 public
客户端浏览器收到的HTML响应内容中如果带有 link img script video audio 等带有src或者href标签时候,这些都是外部链接资源请求url.浏览器会默认自动性的对这些资源 ...
- java之5分钟插入千万条数据
虽说不一定5分钟就插入完毕,因为取决去所插入的字段,如果字段过多会稍微慢点,但不至于太慢.10分钟内基本能看到结果. 之前我尝试用多线程来实现数据插入(百万条数据),半个多小时才二十多万条数据. 线程 ...
- 在CentOs7上yum安装redis
在开始安装步骤之前,先把我的CentOs和redis版本号列出来: # 系统/软件 版本号 1 CentOS7 CentOS Linux release 7.2.1511 (Core) 2 redis ...
- roarctf_2019_easy_pwn
这篇博客主要记录当直接在malloc_hook中直接写入one_gadget不起作用时的一些处理方法.题目附件:https://buuoj.cn/challenges#roarctf_2019_eas ...