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注解在控制器函数的参数列表中中提取出来,但是一旦表单数据过多的话,参数列表将会变得非常长,最好的解决方案是将表单中的 ...
随机推荐
- Python pexpect 库的简单使用
一.Python pexpect 库的使用 在终端中许多命令都有与用户交互的场景,例如切换用户时需要手动输入密码,安装应用有时要输入默认配置等.这对 shell 自动化脚本十分不便.expect 命令 ...
- 第一次作业：https://edu.cnblogs.com/campus/qdu/DS2020/homework/11165
大家好,我是信息与计算科学一班的刘宝龙.爱好是看动漫,玩游戏,听音乐,不喜欢户外运动,是一个二次元宅男.但是喜欢交朋友,希望能与班里所有的同学建立良好的同学关系. 自己的强项是与人的交流与沟通,还有遇 ...
- 原来sed不支持非贪婪匹配
场景 从GISAID上面批量下载下来的序列id很长,格式如下: 太长了,并且makeblastdb的时候-parse_seqids参数会导致报错,大概是长度太长不符合要求无法处理之类的. 不作处理去掉 ...
- oracle中的merge into用法解析
一:merge into的形式 MERGE INTO [target-table] A USING [source-table sql] B ON([conditional expression] a ...
- 与用户交互 Scanner
与用户交互 Scanner Scanner对象 Java提供了一个工具类,可以用以获取用户的输入.java.util.Scanner 是Java5的新特征 基本语法 Scanner s = new S ...
- 转载·Pycharm Pro“This license 56ZS5PQ1RF has been cancelled” 激活码失效处理记录
今天打开许久没用的Pycharm提示激活码过期,激活提示:"This license 56ZS5PQ1RF has been cancelled" 解决方法如下 首先修改hosts ...
- 任意的形如 z = F（x，y）的曲面生成与显示---基于OpenGL Core Profile
运行结果: (圆锥面) (抛物面) (马鞍面) 其中的做法是:从顶部看上去就是一个平面网格.每个点的 z.x的位置都是程序细分出来的(指定起始.结束.步长).比较固定.但高度 y 的计算使用 用户 ...
- 在VS中使用Wind数据终端API的经验（一）
因工作需要,使用vs2019来调用Wind金融终端API数据接口.具体步骤按照wind的帮助文档一步步做下来.这里提一下和帮助文档不同的地方. Windows Console APP下,编译项目后出现 ...
- kg打怪升级
1.kaggle notebook容易断[continue部署] 2.换预训练模型[提交试试] 3.换fold次数
- archlinux 源配置 桌面美化 终端美化 常用软件 grub配置
简介 本文讲对archlinux进行一些基础系统的配置.常用安装的安装,美化进行配置,先看一下美化后的效果吧 配置pacman和使用AUR(archlinuxcn源) archlinux采用滚动更新的 ...