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在内部为不同的输入元 ...
随机推荐
- Sharepoint 列表分页开发
虽然现在linq技术对列表操作都是对实体操作了,但是linq有一点不好,那就是分页舞从下手,假如查出满足条件的记录有1万条,而在分页的时候我每次只需要显示10条,那么我每次点击下一页的时候都查询的是1 ...
- 两阶提交、三阶提交、TCC框架
首先介绍一下分布式事务,分布式事务是指会涉及到操作多个数据库的事务.其实就是将对同一库事务的概念扩大到了对多个库的事务.目的是为了保证分布式系统中的数据一致性.分布式事务处理的关键是必须有一种方法可以 ...
- 聊一下 TS 中的交叉类型
交叉类型不能完全按照传统编程中的 与 来理解. 交叉类型的定义:将多个类型合并为一个类型,包含了所有类型的特性,而且要同时满足要交叉的所有类型. 后半段话不是很好理解,看一下接口类型和联合类型的交叉类 ...
- Go1.18中的泛型编程
目录 目录 前言 泛型是什么 Go的泛型 泛型函数 泛型类型 类型集合 和接口的差异 总结 前言 经过这几年的千呼万唤,简洁的Go语言终于在1.18版本迎来泛型编程.作为一门已经有了14年历史的强类型 ...
- 再谈多线程模型之生产者消费者（单一生产者和多消费者 ）（c++11实现）
0.关于 为缩短篇幅,本系列记录如下: 再谈多线程模型之生产者消费者(基础概念)(c++11实现) 再谈多线程模型之生产者消费者(单一生产者和单一消费者)(c++11实现) 再谈多线程模型之生产者消费 ...
- 【机器学习】决策树（Decision Tree） 学习笔记
[机器学习]决策树(decision tree) 学习笔记 标签(空格分隔): 机器学习 决策树简介 决策树(decision tree)是一个树结构(可以是二叉树或非二叉树).其每个非叶节点表示一个 ...
- Robin Hood
Robin Hood 题目链接 题意 给你n个人和他们的钱数,然后给你k天,每天可以从最高钱数的人那边取一块钱给最少钱数的人,问最后钱数最多的人和钱数最少的人相差多少: 思路 二分最钱数,能下降到的位 ...
- CNN、RNN
卷积神经网络有三个结构上的特性:局部连接,权重共享以及空间或时间上的次采样.这些特性使得卷积神经网络具有一定程度上的平移.缩放和扭曲不变性. CNN由可学习权重和偏置的神经元组成.每个神经元接收多个输 ...
- Glossary Collection
目录 直接修饰用 间接强调用 (多为副词) 过渡用 特别的名词 动词 词组 各种介词 句子 摘要 引言 总结 正文 实验 直接修饰用 Word 含义 例句 近义词 nuanced adj. 微妙的:具 ...
- Proximal Algorithms 5 Parallel and Distributed Algorithms
目录 问题的结构 consensus 更为一般的情况 Exchange 问题 Global exchange 更为一般的情况 Allocation Proximal Algorithms 这一节,介绍 ...