Vue 表单
1、v-model
v-model不再关心初始化的value值。
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>购物车示例</title>
</head> <body>
<div id="app" v-cloak>
<input type="text" v-model="message" value="122" placeholder="请输入" />
<p>输入的文本内容是：{{message}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
message: ''
}
})
</script>
</body> </html>
效果：
2、单选
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<input type="radio" v-model="picked" value="html" id="html" />
<label for="html">HTML</label>
<br />
<input type="radio" v-model="picked" value="js" id="js" />
<label for="js">HTML</label>
<br />
<input type="radio" v-model="picked" value="css" id="css" />
<label for="css">HTML</label>
<br />
<p>选择项为：{{picked}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
picked: 'js'
}
})
</script>
</body> </html>
3、复选框
（1）单独使用时
v-model绑定布尔值
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<input type="checkbox" v-model="checked"/>js
<p>选择项为：{{checked}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
checked: false
}
})
</script>
</body> </html>
（2）组合使用
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<input type="checkbox" v-model="checked" value="html" id="html" />html
<lable for='html'>html</lable>
<br />
<input type="checkbox" v-model="checked" value="js" id="js" />js
<lable for='js'>js</lable>
<br />
<input type="checkbox" v-model="checked" value="css" id="css" />css
<lable for='css'>css</lable>
<br />
<p>选择项为：{{checked}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
checked: []
}
})
</script>
</body> </html>
4、下拉列表
（1）单选下拉列表
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<select v-model="selected">
<option value="0">html</option>
<option value="1">js</option>
<option value="2">css</option>
</select>
<br />
<p>选择项为：{{selected}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
selected: 0
}
})
</script>
</body> </html>
（2）多选下拉列表
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<select v-model="selected" multiple="multiple">
<option value="0">html</option>
<option value="1">js</option>
<option value="2">css</option>
</select>
<br />
<p>选择项为：{{selected}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
selected: []
}
})
</script>
</body> </html>
5、修饰符
（1）lazy
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<!--在change中同步-->
<input type="text" v-model.lazy="message" />
<br />
<p>{{message}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
message: '', }
})
</script>
</body> </html>
（2）number
输入转为number类型
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<!--在change中同步-->
<input type="number" v-model.number="message" />
<br />
<p>{{ typeof message}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
message: 123, }
})
</script>
</body> </html>
（3）trim
去掉输入框的首尾空格
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<!--在change中同步-->
<input type="text" v-model.trim="message" />
<br />
<p>{{message}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
message: ' 5555 66 ', }
})
</script>
</body> </html>
Vue 表单的更多相关文章
- 第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- Vue表单
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson11 一 vue表单 实在是太简单了,直接来个例子 <!DOC ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- vue 表单校验（二）
vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...
- vue表单验证--veevalidate使用教程
vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...
- vue 表单输入与绑定 v-model
vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...
- vue表单校验（三）
vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...
- 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
- vue 表单校验报错 "Error: please transfer a valid prop path to form item!"
vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...
随机推荐
- 公司gitlab不支持ssh时，用http提交代码免密输入方法
由于公司内网22端口被封,只能拨vpn 才能用ssh 提交代码.因此记录以下免密码http(https)提交方式. 修改项目下.git/config 将原来的 http://git.xxx.com/x ...
- python基础day4
1.列表生成式,迭代器&生成器 列表生成式 将列表[0,1,2,3,4,5,6,7,8]中的每个值加1,如何实现?常用的几种方法 方法一: a=[0,1,2,3,4,5,6,7,8] for ...
- PDF文档盖章
概述 在pdf文档的最后一页,合适位置,添加印章图片. maven依赖 <dependency> <groupId>com.itextpdf</groupId> & ...
- mysql索引之七：组合索引中选择合适的索引列顺序
组合索引(concatenated index):由多个列构成的索引,如create index idx_emp on emp(col1, col2, col3, ……),则我们称idx_emp索引为 ...
- RabbitMQ (九) 消息的参数详解
上篇文章讲了声明一个队列时的参数设置,这篇文章主要说一说发布消息时的参数设置. 发布消息时的完整入参是这样的: channel.BasicPublish ( exchange: "test_ ...
- BZOJ 1633 [Usaco2007 Feb]The Cow Lexicon 牛的词典（单调DP）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1633 [题目大意] 给出一个字符串和一个字符串集, 问要删去多少个字符该字符串才可以被 ...
- 【筛法求素数】Codeforces Round #426 (Div. 1) A. The Meaningless Game
先筛出来1000以内的素数. 枚举x^(1/3) 和 y^(1/3)以内的素因子,这样除完以后对于x和y剩下的因子,小的那个的平方必须等于大的. 然后判断每个素因数的次数之和是否为3的倍数,并且小的那 ...
- 【状压dp】CDOJ1608 暑假集训
裸的状压的话,很显然……但有一个强大的优化. 就是在枚举决策的时候,固定第一个空位置.可以证明,这样状态数没有减少,但是降低了很多重复访问. 因为你在枚举的时候,总是可以划分为包含第一个空位置的3个位 ...
- Problem D: 统计元音字母数
#include<stdio.h> int main() { ]; int n,j,k,a,e,i,o,u; a=e=i=o=u=; gets(c); ;c[k]!='\0';k++) { ...
- Wunder Fund Round 2016 (Div. 1 + Div. 2 combined) E. Robot Arm 线段树
E. Robot Arm 题目连接: http://www.codeforces.com/contest/618/problem/E Description Roger is a robot. He ...