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中定义的名称 ...
随机推荐
- 洛谷——P2908 [USACO08OPEN]文字的力量Word Power
P2908 [USACO08OPEN]文字的力量Word Power 题目描述 Farmer John wants to evaluate the quality of the names of hi ...
- 第5天：Ansible-Playbook
Ansible中的每个模块专注于某一方面的功能.虽然每个模块实现的功能都比较简单,但是,将各个模块结合起来就可以实现比较复杂的功能.在Ansible中,将各个模块组合起来的文件是一个YAML格式的配置 ...
- [P2698][USACO12MAR]花盆Flowerpot
Link: P2698 传送门 Solution: 对于可行区间$[L,R]$,随着$L$的递增$R$不会递减 因此可以使用尺取法来解决此题:不断向右移动左右指针,复杂度保持线性 同时为了维护区间内的 ...
- 【后缀自动机】hihocoder1441 后缀自动机一·基本概念
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi:今天我们来学习一个强大的字符串处理工具:后缀自动机(Suffix Automaton,简称SAM).对于一个字符串 ...
- (疯狂java)第一课
(本文章只是为了好玩,没有别的意思,有理解错误之处,恳请提醒,谢谢) 环境变量的安装 记得很久之前大学学习java的时候还需要配置环境变量.系统变量,今天看了一下居然还是需要配置,想想啊,mac下面已 ...
- Eclipse 4.5插件安装以及其他设置
eclipse安装Veloeclipse.ui_2.0.8 在help-> install new software ->workwith中输入The Eclipse Project ...
- Problem E: 零起点学算法97——进制转换
#include<stdio.h> int main(){ ]; while(scanf("%d%d",&n,&r)!=EOF){ ,i=; ){ fl ...
- PHP与mysql数据库
1.PHP访问数据库的一般步骤 连接MySQL服务器 选择MySQL数据库 执行SQL语句(增,删,改,查) 关闭结果集,释放资源 关闭MySQL服务器的连接 需要查的表的数据: 2.连接和关闭实例 ...
- ORACLE启动 切换实例命令
启动服务器的其他实例 export ORACLE_SID=数据库实例名 sqlplus /nolog conn /as sysdba select name from v$database; !lsn ...
- 免费网站监控服务阿里云监控,DNSPod监控,监控宝,360云监控使用对比
网站会因为各种原因而导致宕机,具体表现为服务器没有响应,用户打不开网页,域名解析出错,搜索引擎抓取页面失败,返回各种HTTP错误代码.网站宕机可能带来搜索引擎的惩罚,网站服务器不稳定与百度关系文章中就 ...