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在内部为不同的输入元 ...
随机推荐
- js 将二维数组转为一维数组
方法一 使用ES的最新语法:Array.prototype.flat(). flat([dept]),参数 dept 为数组的深度,默认为1,根据传入的深度将数组展开. 对于不确定深度的数组,可以传入 ...
- 遍历显示自定义的widget
需求 列表展示: 列表项都是同一格式,列表项数据从List里取 解决方案 使用map map源码 Iterable<T> map<T>(T f(E e)) => Mapp ...
- tomcat启动报错There is insufficient memory for the Java Runtime Environment to continue
tomcat启动报错后显示以下错误 ## There is insufficient memory for the Java Runtime Environment to continue.# Nat ...
- 【LeetCode】606. Construct String from Binary Tree 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 方法一:先序遍历 日期 题目地址:https://l ...
- HAT
目录 概 主要内容 代码 Rade R. and Moosavi-Dezfooli S. Helper-based adversarial training: reducing excessive m ...
- Chapter 11 Why Model ?
目录 11.1 Data cannot speak for themselves 11.2 Parametric estimators of the conditional mean 11.3 Non ...
- OpenCV 可自动调整参数的透视变换
在shiter大牛的基础之上,对于他的程序做了一定的修改. 首先,通过两个循环使得霍夫变换两个参数:角度的分辨率和点个数的阈值可以变换,这样就不必对于每一张图像都手动的设置阈值.其次,过滤掉了两个距离 ...
- 主席树（区间第k小的数）
题目链接: https://www.luogu.org/problem/P3834 首先要离散化,然后主席树模板. 1 #include<cstdio> 2 #include<cst ...
- SpringBoot集成Actuator健康指示器health
1.说明 本文详细介绍Actuator提供的HealthIndicators, 即健康指示器的配置使用, 利用自动配置的健康指标, 检查正在运行的应用程序的状态, 以及自定义健康指标的方法. 监控软件 ...
- C# 绘制印章
最近有个.net core的项目要绘制印章功能,一个公司印章,一个个人印章,于是抽了点时间自己写了一个,现在分享出来 using System; using System.Collections.Ge ...