vue学习12-表单属性绑定
1 <!DOCTYPE html>
2 <html lang='en'>
3 <head>
4 <meta charset='UTF-8'>
5 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
6 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
7 <script src='https://unpkg.com/vue/dist/vue.js'></script>
8 <title></title>
9 </head>
10 <body>
11 <div id='app'>
12
13 <div id="el1">
14 <select v-model="selected">
15 <option disabled value="">请选择：</option>
16 <option>A</option>
17 <option>B</option>
18 <option>C</option>
19 </select>
20 <span>单选：{{selected}}</span>
21 </div>
22 <div id="el2">
23 <input type="checkbox" value = "多选1" v-model="checkboxNames">
24 <label for="多选1">多选1</label>
25 <input type="checkbox" value = "多选2" v-model="checkboxNames">
26 <label for="多选2">多选2</label>
27 <input type="checkbox" value = "多选3" v-model="checkboxNames">
28 <label for="多选3">多选3</label>
29 <span>多选：{{checkboxNames}}</span>
30 </div>
31
32 <div id="el3">
33 <input type="radio" value = "单选1" v-model="picked">
34 <label for="单选1">单选选1</label>
35 <input type="radio" value = "单选2" v-model="picked">
36 <label for="单选2">单选2</label>
37 <input type="radio" value = "单选3" v-model="picked">
38 <label for="单选3">单选3</label>
39 <span>单选：{{picked}}</span>
40 </div>
41
42
43 <div>
44 <input type="text" v-model.lazy="message">
45 <div>lazy鼠标离开输入框，才会显示输入的内容{{message}}</div>
46 </div>
47 <div>
48 <input type="text" v-model.number="message1">
49 <div>number自动去除非数字的内容{{message1}}</div>
50 </div>
51 <div>
52 <input type="text" v-model.trim="message2">
53 <div>trim自动去除首位空格{{message2}}</div>
54 </div>
55
56
57 <script>
58 new Vue({
59 el:'#app',
60 data:{
61 selected:"",
62 checkboxNames:[],
63 picked:"",
64 message:"",
65 message1:"",
66
67 message2:"",
68
69 }
70 }
71 )
72 </script>
73 </body>
74 </html>
vue学习12-表单属性绑定的更多相关文章
- HTML5 学习笔记 表单属性
HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...
- 37.VUE学习之-表单的综合运用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- 前端MVC Vue2学习总结（五）——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- Vue表单输入绑定（文本框和复选框）
文本框 <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue.js教程--基础2(事件处理 表单输入绑定
事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- Vue（10）表单输入绑定v-model
v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元 ...
随机推荐
- Shell bash和sh区别
Shell 中文意思贝壳,寓意类似内核的壳.Shell是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统内核的服务.Shell 是一个用 C 语言编写的程序,它是用户使用 Li ...
- [C# Expression] 之动态创建表达式
上一篇中说到了 Expression 的一些概念性东西,其实也是为了这一篇做知识准备.为了实现 EFCore 的多条件.连表查询,简化查询代码编写,也就有了这篇文章. 在一些管理后台中,对数据进行 ...
- X-Tim开发日志
1.X-Tim--------一个极客风的手表 引言 很久之前就看到FASTSHIFT,但是水平太差,可是又想做一个这样的手表,于是在学习了FASTSHIFT的页面管理之后,也开始了X-Tim的制作. ...
- LocalDateTime与Date相互转换
LocalDateTime 转 Date LocalDateTime localDateTime=LocalDateTime.now() Date date = Date.from(localDate ...
- 常见分布式唯一ID生成策略
方法一: 用数据库的 auto_increment 来生成 优点: 此方法使用数据库原有的功能,所以相对简单 能够保证唯一性 能够保证递增性 id 之间的步长是固定且可自定义的 缺点: 可用性难以保证 ...
- CycleGAN
目录 概 主要内容 代码 Zhu J., Park T., Isola P. & Efros A. Unpaired Image-to-Image Translation using Cycl ...
- CS5265替代CH7211|Capstone CS5265芯片|替代CH7211芯片
龙迅Chrontel的CH7211是一款Type-C转HDMI2.0半导体设备,可通过USB Type-C连接器将DisplayPort信号转换为HDMI/DVI.这款创新的基于USB Type-C的 ...
- CS5213设计说明书|Capstone CS5213|CS5213设计参考电路
Capstone CS5213是一款HDMI到VGA转换器结合了HDMI输入接口和模拟RGB DAC输出且带支持片上音频数模转换器.CS5213芯片设计简单,整体芯片尺寸精悍,外围电路集成优化度较高, ...
- Java初学者作业——简单程序根据用户输入的会员类型以及购物金额，判断是否能够享受活动优惠
返回本章节 返回作业目录 需求说明: 超市周年庆举行购物满减活动,编写Java程序,根据用户输入的会员类型以及购物金额,判断是否能够享受活动优惠,会员类型的输入不限制大小写.具体获取规则:若为VIP会 ...
- 编写Java程序，使用Swing布局管理器和常用控件，实现仿QQ登录界面
返回本章节 返回作业目录 需求说明: 使用Swing布局管理器和常用控件,实现仿QQ登录界面 实现思路: 创建登录界面的类QQLogin,该类继承父类JFrame,在该类中创建无参数的构造方法,在构造 ...