vue_ form表单 v-model
插值两种方式：{{}}，v-model
v-model
可以用v-model指令在只能在表单<input>及<textarea>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
监听用户的输入事件以更新数据
<body>
<div id="form">
<form>
<input v-model="message" placeholder="edit me">
<p>
Message is :{{ message }}
</p>
</form>
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var form = new Vue({
el:'#form',
data:{
message:'hello world',
}
})
</script>
</body>
修饰符
.lazy（懒惰，加回车键显示结果）
<body>
<div id="form">
<!-- 阻止表单默认的submit行为 -->
<form @submit.prevent>
<!-- .lazy懒惰 加回车键 -->
<input v-model.lazy="message" placeholder="edit me">
<p>
Message is :{{ message }}
</p>
</form>
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var form = new Vue({
el:'#form',
data:{
message:'hello world',
}
})
</script>
</body>
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
只允许输入数值
<body>
<div id="form">
<!-- 阻止表单默认的submit行为 -->
<form @submit.prevent> <input v-model.number="age" type="number">
</form>
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var form = new Vue({
el:'#form',
data:{
age:10,
}
})
</script>
</body>
鼠标按钮修饰符
vue_ form表单 v-model的更多相关文章
- Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作
一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...
- Laravel框架中Form表单Get请求搜索（在此感谢[https://simon8.com]）
首先看一下HTML部分的Form表单 <form role="search" method="get" id="searchform" ...
- Django组件之Form表单
一.Django中的Form表单介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入 ...
- python自动化开发-[第二十天]-form表单,CBV和FBV,序列化
1.CBV和FBV的用法 2.序列化用法 3.form表单 一.CBV和FBV 1.cbv是 class based view(基于类),fbv是function based view(基于函数) 2 ...
- django基础之FBV与CBV，ajax序列化补充，Form表单
目录: FBV与CBV ajax序列化补充 Form表单(一) 一.FBV与CBV 1.什么是FBV.CBV? django书写view时,支持两种格式写法,FBV(function bases vi ...
- Django学习系列之Form表单结合ajax
Forms结合ajax Forms的验证流程: 定义用户输入规则的类,字段的值必须等于html中name属性的值(pwd= forms.CharField(required=True)=<i ...
- Django form表单 组件
目录 Django form表单 组件 Form 组件介绍 普通方式手写注册功能 使用form组件实现注册功能 Form 常用字段与插件 常用字段(必备) 字段参数(必备) 内置验证(必备) 自定义效 ...
- web框架-（六）Django补充---form表单验证
一.form表单验证 1. 常规html页面的form表单验证 常规页面中,如果想实现对表单中用户输入信息的数据验证,需要配合Ajax来实现. 使用前我们先来熟悉下函数参数:request,其中包含的 ...
- 封装Vue Element的form表单组件
前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...
随机推荐
- Java 面试题基础概念收集(高级)
JVM垃圾回收: GC又分为 minor GC 和 Full GC (也称为 Major GC ).Java 堆内存分为新生代和老年代,新生代中又分为1个 Eden 区域 和两个 Survivor 区 ...
- 1568: [JSOI2008]Blue Mary开公司
1568: [JSOI2008]Blue Mary开公司 题目描述 传送门 题目分析 简单分析可以发现就是不停给出了\(n\)条直线,要求每次给出一条直线后求出所有直线在横坐标为\(x\)时\(y\) ...
- hdu 1241 搬寝室 水dp
搬寝室 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem Desc ...
- 通过spring整合activeMQ实现jms实例
写的很详细 http://blog.csdn.net/leonardo9029/article/details/43154385
- C4 文件和目录：APUE 笔记
C4: 文件和目录 本章主要讨论stat函数及其返回信息,通过修改stat结构字段,了解文件属性. struct stat结构定义如下: struct stat { __dev_t st_dev; / ...
- javascript中对变量类型的判断
本文正式地址:http://www.xiabingbao.com/javascript/2015/07/04/javascript-type 在JavaScript中,有5种基本数据类型和1种复杂数据 ...
- 多网卡绑定（bond）
通过以下命令查看bond0的工作状态查询能详细的掌握bonding的工作状态,如这个绑定各网卡的工作状态.主备关系.链路侦测时间[root@ASMTS ~]# cat /proc/net/bondin ...
- Kafka、RabbitMQ、RocketMQ、ActiveMQ 17 个方面综合对比
本文将从,Kafka.RabbitMQ.ZeroMQ.RocketMQ.ActiveMQ 17 个方面综合对比作为消息队列使用时的差异.(欢迎加入Java程序员群:630441304,一起学习交流会) ...
- 1-22-shell脚本基本应用-实验手册
脚本应用思路 1. 确定命令操作(设计并执行任务) 2. 编写Shell脚本(组织任务过程) 3. 设置计划任务(控制时间,调用任务脚本) ------------------------------ ...
- CentOS 6.5 x86_64升级内核到最新版2.6.32-696.1.1.el6.x86_64
安装keepaliver时内核版本不一致,会导致后来的keepalive安装完成后不能正常提供服务 [root@gmxfjr-dev17 ha]# ls /usr/src/kernels/2.6.32 ...