vue表单绑定v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
message: "",
}, }) </script>
</body>
</html>
model修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- lazy修饰， 失去焦点时绑定 -->
<input type="text" v-model.lazy="message">
<h3>{{message}}</h3> <!-- number修饰符 -->
<input type="number" v-model.number="age">
<h3>{{typeof age}} {{age}}</h3> <!-- trim修饰符 去除两边空格-->
<input type="text" v-model.trim="name">
<h3>{{name}}</h3>
</div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
message: "",
age:"",
name:""
}, }) </script>
</body>
</html>
model和checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<label for="agree">
<input type="checkbox" id="agree" v-model="isagree"> 同意协议
</label> <h3>你选择的：{{isagree}}</h3>
<button :disabled="!isagree">下一步</button> ////多选框
<input type="checkbox" id="" value="篮球" v-model="hobbies"> 篮球
<input type="checkbox" id="" value="足球" v-model="hobbies"> 足球
<input type="checkbox" id="" value="乒乓球" v-model="hobbies"> 乒乓球
<input type="checkbox" id="" value="羽毛球" v-model="hobbies"> 羽毛球
<h3>你的爱好{{hobbies}}} </h3>
</div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
message: "",
isagree: false,
hobbies: []
},
// 有v-model时
}) </script>
</body>
</html>
model和radio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" name="sex" value="男" v-model="sex"> 男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="女" v-model="sex"> 女
</label> <h3>你选择的性别：{{sex}}</h3>
</div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
message: "",
sex: "男",
},
// 有v-model时可省略name也是互斥， 变量sex有默认值则radio直接有默认选项
}) </script>
</body>
</html>
model和select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 单选 -->
<select name="abc" v-model="fruit">
<Option value="苹果" >苹果</Option>
<Option value="香蕉" >香蕉</Option>
<Option value="葡萄" >葡萄</Option>
<Option value="橙子">橙子</Option>
</select> <h3>选择的水果是：{{fruit}}</h3> <!-- 多选 -->
<select name="abc" v-model="fruits" multiple>
<Option value="苹果" >苹果</Option>
<Option value="香蕉" >香蕉</Option>
<Option value="葡萄" >葡萄</Option>
<Option value="橙子">橙子</Option>
</select> <h3>选择的水果是：{{fruits}}</h3> </div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{ fruit: "苹果",
fruits: [] }
// 有v-model时
}) </script>
</body>
</html>
vue表单绑定v-model的更多相关文章
- Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- vue 表单输入与绑定 v-model
vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...
- vue -- v-model 表单绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue基础-动态样式&表单绑定&vue响应式原理
动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...
- 第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
- vue 表单校验（二）
vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...
- vue表单验证--veevalidate使用教程
vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...
- Spirng MVC +Velocity 表单绑定命令对象
通常,表单中的数据在提交之后可以通过Spring MVC的@RequestParam注解在控制器函数的参数列表中中提取出来,但是一旦表单数据过多的话,参数列表将会变得非常长,最好的解决方案是将表单中的 ...
随机推荐
- P2212 Watering the Fields S
题目描述 给定n个点,第i个点的坐标为(xi,yi)(xi,yi),如果想连通第i个点与第j个点,需要耗费的代价为两点的距离.第i个点与第j个点之间的距离使用欧几里得距离进行计算,即:(xi-xj ...
- 更改yum源
1)cd /etc/yum.repos.d/ 2)wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/C ...
- OO_Lab1总结博客
OO_Lab1 问题描述 模拟多线程实时电梯系统,新主楼ABCDE五个楼座各楼层均有电梯,乘客发起形如"从X座x层到Y座y层"的请求,电梯模拟上下行.开关门.乘客进出等行为,以满足 ...
- hbase master 无法启动
环境部署: hbase 采用azure的虚机,存储采用azure的blockblob. 问题: 生产碰到过几次,hbase master无法启动的问题,这种情况下是可以正常读写,但是如果这个时候,发生 ...
- VisualVM无法运行，修改配置文件
在VisualVM安装位置下找到etc目录修改etc目录下的visualvm.conf文件 加入配置 参数 指定JDK或JRE路径,如 visualvm_jdkhome="C:\xxx\ ...
- MYSQL DUAL(伪表)
#DUAL是一个伪表,不存在的表. SELECT 8*9 FROM DUAL #输出72
- 在服务器建立git服务端接收push后覆盖部署记录
1.在本地要部署的目录 git initgit clone --bare ./ my_project.git 把本地init仓库克隆到 my_project.git 2.上传my_project.gi ...
- MySQL 分组排序，取第一条
select t1.* from coal_installed_capacity t1where NOT EXISTS (select * from coal_installed_capacity t ...
- HGD1-LSP-函数集-网络整理
CAD LSP函数集 header
- RPA的应用及工作原理
通过本章学习,您将了解到: 什么是RPA RPA能做些什么 RPA的应用有什么特点 RPA是怎样进行工作的 RPA怎么实现人机协作 RPA的未来趋势怎么样 什么是RPA RPA是利用软件来执行业务流程 ...