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在内部为不同的输入元 ...
随机推荐
- iOS越狱插件源查找及避免插件劫持
1.关于 iOS越狱插件源查找地址:https://www.ios-repo-updates.com/ 2.注意 不要使用不可靠的第三方源,其可能存在劫持,而你却茫然不知. 使用上面的网站查找你需要的 ...
- Interviewe(hdu3486)
Interviewe Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- Optimal Symmetric Paths(UVA12295)
Description You have a grid of n rows and n columns. Each of the unit squares contains a non-zero ...
- Certified Robustness to Adversarial Examples with Differential Privacy
目录 概 主要内容 Differential Privacy insensitivity Lemma1 Proposition1 如何令网络为-DP in practice Lecuyer M, At ...
- 以简御繁——介绍IOC
1.IOC的理论背景 大家开发理念,一直都是奔着架构稳定.低耦合性.而IOC初衷,就是为了解决模块依赖问题,理解<六大设计原则(SOLID)> 如图所示,在我们开发中,业务的实现,就是靠着 ...
- uniapp解决测评有组件导出风险，解决APP反编译，回编译后app无法打开的问题
1.APP反编译 使用hbx云打包,打包出apk 拿到apk后,先下载反编译工具 https://pan.baidu.com/s/1A5D8x_pdSELlHYl-Wl6Xnw 提取码 6vzd 使用 ...
- Java实习生常规技术面试题每日十题Java基础（二）
目录 1. JAVA 的反射机制的原理. 2.静态嵌套类(Static Nested Class)和内部类(Inner Class)的不同? 3.如何将String类型转化成Number类型. 4.什 ...
- 读懂Java代码总结
代码不要忙着细读.要粗,找到大体的脉络. 要改.根据自己的设想,大胆去改,改了之后就运行,看看是否有预想的效果.动手才能有收获. 找简单的任务赶快做起来.上司没有布置任务,就自己给自己布置. 不要偏执 ...
- 初识MASA Blazor
MASA Blazor是一个Blazor的UI组件库.就像大家写前端熟知的Bootstrap, Ant Design一样. MASA Blazor官网地址:https://blazor.masasta ...
- js 拟写登录页 可以拖动登录框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...