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注解在控制器函数的参数列表中中提取出来,但是一旦表单数据过多的话,参数列表将会变得非常长,最好的解决方案是将表单中的 ...
随机推荐
- WLAN - AP上线
1 保证AC,AP互通2 AP上线capwap 1 AP组创建 2 管理域模板 3 AC组和管理域模板绑定 4 指定AC的接口 5 导入AP3 WALN的业务配置 1 安全模板 2 SSID 模板 3 ...
- reflection反射
reflection反射 动态和静态语言 动态语言 动态语言就是一类在运行时可以改变其结构的语言,通俗点说就是在运行时代码可以根据某些条件改变自身结构 主要动态语言:object-C,C#,JavaS ...
- 使用Sales_data 类
添加两个Sales_data 对象 因为Sales_data 类没有提供任何操作,所以我们必须自己编码实现输入.输出和相加的功能.假设已知Sales_data 类定义于 Sales_data.h 文件 ...
- Nginx重启操作
1.杀掉Nginx进程 killall nginx 2.启动Nginx /usr/local/openresty/nginx/sbin/nginx -c /usr/local/openresty/ng ...
- 1007.Django模型基础02
一.常用的查询 常用的查询方法(注:User为app项目): 获取所有的记录: rs = User.objects.all() 获取第一条数据:rs = User.objects.first() 获取 ...
- DOS基本命令与快捷键
DOS命令 #查看当前盘下的所有目录 dir #切换盘符 直接盘符名称: 例如切换D: #切换目录 cd 目录名称 #清屏 cls #退出 exit #创建 cd>文件名称.文件后缀 #查询电脑 ...
- CVE-2016-2183(SSL/TLS)漏洞的办法
运行gpedit.msc,打开"本地组策略编辑器" 启用"SSL密码套件顺序" TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256_ ...
- Java基础学习——复利计算
面对一个问题的时候,首先应该确定问题中存在多少参数,对每个参数进行定义.并知晓所写代码目标.思路清晰,
- 关于TCP协议传文件的例子
按照惯例,先来进行复习,这也是自学巩固的一个过程 首先是在工程文件PRO里,需要增加network,这个是引用TCP监听套接字和连接套接字的前提 第二部,在服务端头文件server.h进行基础的配置: ...
- 安装Win11需要网络才能下一步怎么跳过
1.先Shift+F10打开命令提示符 2.运行C:\Windows\System32\oobe\BypassNRO.cmd 3.自动重启来到联网这一步,多了一个没有网络的选项,进入.