vue -- v-model 表单绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<input type="text" v-model="value"> <!-- 双向绑定，输入实时绑定 -->
<input type="text" v-model.lazy="value"> <!-- 懒加载，输入完毕才加载 -->
<input type="text" v-model.trim="value"> <!-- 修饰符，去除首位空格 -->
<input type="text" v-model.number="value"> <!-- 修饰符，数字input -->
<h1>{{value}}</h1> <!-- 原理刨析，单向绑定实现双向绑定 -->
<input type="text" :value="message" @input="valChange"> <!-- @input : 输入事件 -->
<h1>{{message}}</h1> <!-- radio运用 -->
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label> <label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h1>性别：{{sex}}</h1> <!-- checkbox单选框运用 -->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgrees">同意协议
</label>
<button :disabled="!isAgrees">下一步</button> <!-- checkbox多选框运用 -->
<div>
<label v-for="(item,i) in hobbies_all">
<input type="checkbox" v-model="hobbies" :value="item">{{item}}
</label>
</div> <h1>你的爱好{{hobbies}}</h1>
<!-- select运用 -->
<select name="" id="" v-model="area">
<option value="江西">江西</option>
<option value="湖北">湖北</option>
</select>
<h1>你的地区：{{area}}</h1>
</div>
</body>
<script>
/*
v-model 表单绑定
*/
const app = new Vue({
el : "#app",
data : {
value : "123",
message : "msg",
sex : "男",
isAgrees : false,
hobbies_all : ["篮球","足球","乒乓球"],
hobbies : [],
area : "江西"
},
methods : {
valChange : function(event){
// 通过事件获取输入的值
let val = event.target.value;
// 绑定
this.message = val;
}
}
});
</script>
</html>
vue -- v-model 表单绑定的更多相关文章
- Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- vue基础-动态样式&表单绑定&vue响应式原理
动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...
- 【VUE】3.表单操作
1. Form组件渲染 1. components -> 新增组件Form.vue <template> <div>表单验证</div> </templ ...
- 用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。
Vue3 的父子组件传值.绑定表单数据.UI库的二次封装.防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法. 基础使用方法 Vue3对于表单的绑定提供了一 ...
- Spirng MVC +Velocity 表单绑定命令对象
通常,表单中的数据在提交之后可以通过Spring MVC的@RequestParam注解在控制器函数的参数列表中中提取出来,但是一旦表单数据过多的话,参数列表将会变得非常长,最好的解决方案是将表单中的 ...
- vue+element 动态表单验证
公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...
- Vue+Element-Ui 异步表单效验
简单的效验 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名 /* ruleForm :表单绑定的数 ...
- Knockout学习之表单绑定器（上）
表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然 ...
- 034——VUE中表单控件处理之使用vue控制radio表单的实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- QPixmap和QImage
1.QPixmap QPixmap的设计本来就是用来加速显示,用paint绘图时用QPixmap会比其他类的效果好很多.一般小图片用QPixmap. 2.QImage 依赖软件,直接像素访问,适合大图 ...
- 【Jmeter】jmeter提取response中的返回值，并保存到本地文件--BeanShell后置处理器
有个需求,需要在压测环境中,创建几十万的账号数据,然后再根据创建结果,查询到某些账号信息. 按照之前我的做法,直接Python调用API,然后再数据库查询: 但是近期所有开发人员的数据库访问权限被限制 ...
- Java求素数和
描述 从键盘任意输入两个整数m,n,编程计算并输出m~n之间的所有素数之和. 输入 在一行上输出m和n. 输出 m和n之间(包括m和n)的素数的和 难度 一般 输入示例 2 5 输出示例 10 完成代 ...
- ios输入法弹出输入框定位错乱
弹出输入框会使视口高度发生变化,弹出输入框后动态匹配这个高度 以下是使用jq的方法 $('input').on('blur', function () { setTimeout(function () ...
- 你是个好人，但不是个好leader
午餐时间,我翻看朋友圈,浏览到一条朋友A的最新动态,她刚创业半年多的公司因为资金周转不灵.项目搁浅.合伙人撤资等多方面原因,最终倒闭了. 朋友A有着多年的名企工作经验,985大学毕业,在学校时是学霸, ...
- 自适应阈值化操作：adaptiveThreshold()函数
在图像阈值化操作中,更关注的是从二值化图像中,分离目标区域和背景区域,但是仅仅通过设定固定阈值很难达到理想的分割效果.而自适应阈值,则是根据像素的邻域块的像素值分布来确定该像素位置上的二值化阈值.这样 ...
- JAVA8对象属性的计算
Men men = new Men(); men.setName("UU"); men.setAge("56"); Men men1 = new Men(); ...
- 【学习笔记】BP神经网络
转自 huaweizte123的CSDN博客 链接 https://blog.csdn.net/huaweizte123/article/details/78803045 第一步.向前传播得到预测数 ...
- 使用javacv 截取视频指定帧节
个人博客 地址:https://www.wenhaofan.com/article/20190407105818 引入依赖 <dependency> <groupId>org. ...
- Linux shell unzip和tar 批量解压文件
#!/bin/sh UNTAR="tar -xvf " #unzip all zip files function unzip_all_file() { for i in *.zi ...