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注解在控制器函数的参数列表中中提取出来,但是一旦表单数据过多的话,参数列表将会变得非常长,最好的解决方案是将表单中的 ...
随机推荐
- js 获取html加载的参数？file=123&time=2021
<script> function GetArgsFromHref(sHref, sArgName) { var args = sHref.split("?"); va ...
- ios底部安全距离
一.使用背景 苹果官方推荐:使用env(),constant()来适配,env()和constant(),是IOS11新增特性,用于设定安全区域与边界的距离 safe-area-inset-left: ...
- C#-读取写入Excel
/// <summary> /// 读取Excel文档 /// </summary> /// <param name="Path">文件名 ...
- k8s重启应用
[root@k8s-master01 opt_k8s]# cat app_list xxx-supervise-srv xxx-recon-srv xxx-mkt-strategy-srv xxx-u ...
- 服务器端口对外开放（包括，mysql，django）
1.查看对外开放端口号,并开放端口 查看开放的端口 ,有两个命令 1.1.iptables -L -n (比较清晰明了) 1. 2.firewall-cmd --list-ports 1.3 .打开端 ...
- Vue学习day1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- 修改word文档中已有的批注者名称
前言 https://blog.csdn.net/hyh19962008/article/details/89430548 word中可以通过修改用户的信息实现新建的批注者显示不同的名称,但是对于文档 ...
- ssh反向代理树莓派+motion，实现公网远程视频监控
注意:本文公网远程监控部分需要借助有公网IP的云服务器进行ssh反向代理. 一.借助motion实现内网的视频监控 准备 插上摄像头,然后输入ls /dev/video*命令检查是否识别了摄像头 安装 ...
- android装包
一.找到对应包体apk 二.数据线连接电脑及手机,弹出USB连接选项并选择传输文件 注:如果未弹出USB连接选项可尝试换根数据线解决 三.点击我的电脑找到本机设备 四.将对应包体文件拖入本机设备 五. ...
- 通过cpolar内网穿透 https://blog.csdn.net/CpolarLisa/article/details/128148698
远程办公:通过cpolar内网穿透,远程桌面控制家里公司内网电脑_Cpolar Lisa的博客-CSDN博客 https://blog.csdn.net/CpolarLisa/article/deta ...