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 ...
随机推荐
- Redis的各个数据的类型基本命令
什么是Redis: 概念: Redis (REmote DIctionary Server) 是用 C 语言开发的一个开源的高性能键值对(key-value)数据库. 特征:1. 数据间没有必然的关联 ...
- Spring boot项目的打包发布
Eclipse打包发布项目 打包项目 首先需要将项目编译的文件删除,执行[Run As]->[Maven clean] 如果这个时候项目报错,在pom.xml文件中添加以下代码过滤掉单元测试 & ...
- 心理学实验程序编程（python）
任务一:实现简单的屏幕的颜色之间的切换 import pygame from pygame.locals import * pygame.init() win = pygame.display.set ...
- python三器
1.1 装饰器 1.装饰器的作用 1. 装饰器作用:本质是函数(装饰其他函数)就是为其他函数添加其他功能 2. 装饰器必须准寻得原则: 1)不能修改被装饰函数的源代码 2)不能修改被装饰函数的调用方式 ...
- ansible-jinjia2模板
1. 含义 是基于python的模板引擎,包含变量和表达式两部分,这两者在模板求值的时候会被替换为值: 模板中还有标签,控制模板的逻辑 2. 基础语法 - 模板的表达式都包含在分隔符"{{ ...
- 常用的一些git命令整合
一.创建一个版本库 1.mkdir xxx 2.git init 使用git init命令将这个目录变成Git可以管理的仓库 这个版本仓库创建好了,xxx目录下有一个隐藏的.git目录(里面有暂存区( ...
- vue 脚手架使用路由
概念: 后端路由: 后端处理URL和页面之间的映射关系 前端发展阶段: 1.后端渲染阶段(以jsp,php为代表,其特点为html代码和后端语言代码混写在一起 2.前后端分离阶段(随着ajax的兴起, ...
- day03_1spring3
事务管理的几种方式.spring整合Junit.spring整合web.ssh整合 一.事务管理的几种方式: 1.介绍前提我们需要导入:spring-tx-3.2.0.RELEASE.jar的包里面含 ...
- 远程执行本地脚本_linux
一.远程执行脚本 1.免机器指纹确认(无需填写yes/no) ssh -o StrictHostKeyChecking=no root@192.168.108.78 2.远程执行本地脚本 ssh -o ...
- SQLserver中存储图片
两种方式1.存放图片路径2.转换成2进制流(不过这样的话将很占用数据库空间)存路径的方式就很简单了,下面着重给出转换成2进制流的存入以及读取方法.存入:string FilePath="&q ...