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注解在控制器函数的参数列表中中提取出来,但是一旦表单数据过多的话,参数列表将会变得非常长,最好的解决方案是将表单中的 ...
随机推荐
- oracle 白名单作用及配置教程
出于提高数据安全性等目地,我们可能想要对oracle的访问进行限制,允许一些IP连接数据库或拒绝一些IP访问数据库. 当然使用iptables也能达到限制的目地,但是从监听端口变更限制仍可生效.只针对 ...
- github 开源项目安装
1.打开github 2.搜索相关项目 3.使用系统下载安装 4.执行 指令;git clone git://github.com/****.git
- DBeaver通过phoenix连接云主机的hbase
准备 1.云主机上已经安装好jdk.hadoop.hbase.zookeeper.phoenix,并且在主机上测试连接成功.可参考 https://blog.csdn.net/shangxindeku ...
- Float浮动、 CSS定位(position)
Float浮动. CSS定位(position)1.CSS定位机制(1)普通流(标准流)-默认状态,元素自动从左往右,从上往下的排列(2)浮动-会使元素向左或向右移动,只能左右,不能上下-浮动元素碰到 ...
- Spring AOP @before@after@around@afterreturning@afterthrowing执行顺序
public Object aop(Method method,Object object) { try { try { /*doAround start*/ doBefore(); method.i ...
- centos 通过yum安装docker-ce报错
通过yum安装docker-ce报错,是因为本机安装过多次造成的,如下所示,需要解决掉冲突依赖,从新安装 1 从 https://mirrors.aliyun.com/docker-ce/linux/ ...
- mysql8.0以后的版本开启远程连接：
mysql8.0以后的版本开启远程连接: 1 CREATE USER 'root'@'%' IDENTIFIED BY '你的密码'; 2 GRANT ALL ON *.* TO 'root'@'%' ...
- 遇到 https://packetlife.net/
"I have never let my schooling interfere with my education." --Mark Twain
- UGUI六大基础组件——Graphic Raycaster
一.组件作用 图形摄像投射器是用于检测UI输入事件的射线发射器.通过射线检测玩家和用户的交互,判断是否点击到了UI元素. 注意:不是通过碰撞器来检测的,而是通过图形来检测的. 二.参数解释 ***** ...
- 【BUUCTF】ACTF2020 新生赛Include1 write up
查看源代码+抓包都没有发现什么信息,只有这两个东东 <meta charset="utf8"> Can you find out the flag? <meta ...