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中定义的名称 ...
随机推荐
- 【js学习】js连接RabbitMQ达到实时消息推送
js连接RabbitMQ达到实时消息推送 最近在自己捯饬一个网站,有一个功能是需要后端处理完数据把数据发布到MQ中,前端再从MQ中接收数据.但是前端连接MQ又成了一个问题,在网上搜了下资料,点进去一篇 ...
- 【kubernetes】ubuntu14.04 64位 搭建kubernetes过程
背景: Kubernetes介绍:http://kubernetes.io/docs/getting-started-guides/ github地址:https://github.com/kuber ...
- HDU 4388 Stone Game II 博弈论 找规律
http://acm.hdu.edu.cn/showproblem.php?pid=4388 http://blog.csdn.net/y1196645376/article/details/5214 ...
- [CODECHEF]LUCASTH
题意:设$f(n,k)=\sum\limits_{\substack{S\subseteq\{1,\cdots,n\}\\|S|=k}}\prod\limits_{x\in S}x$,问$f(n,0\ ...
- 【Kruskal+dfs】BZOJ1016- [JSOI2008]最小生成树计数
[题目大意] 现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的最小生成树. [思路] 拖欠了三个月整(?)的题目,搞出来弄掉了……本年度写的时候姿势最丑 ...
- FZU 2036 Log Calculator
思路:数学题! 给定a,b,求s=log2(2a+2b);转化为s=b+log2(2a-b+1),(a>b). 测试可以知道,当x>=32时,在精度范围内log2(2x+1)=x.否则将a ...
- JVM入门——JVM内存结构
一.java代码编译执行过程 1.源码编译:通过Java源码编译器将Java代码编译成JVM字节码(.class文件) 2.类加载:通过ClassLoader及其子类来完成JVM的类加载 3.类执行: ...
- Wunder Fund Round 2016 (Div. 1 + Div. 2 combined) F. Double Knapsack 鸽巢原理 构造
F. Double Knapsack 题目连接: http://www.codeforces.com/contest/618/problem/F Description You are given t ...
- Educational Codeforces Round 8 D. Magic Numbers 数位DP
D. Magic Numbers 题目连接: http://www.codeforces.com/contest/628/problem/D Description Consider the deci ...
- Server-side Query interception with MS SQL Server
up vote15down votefavorite 5 I'm researching into intercepting queries that arrive at the SQL Serv ...