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 ...
随机推荐
- Centos 7 firewall的防火墙的规则
这是官方文档: http://www.firewalld.org/documentation/man-pages/firewall-cmd.html 想使用iptables的规则,firewall也可 ...
- 【Newtonsoft.Json】json序列化小驼峰格式（属性名首字母小写）
我是一名 ASP.NET 程序员,专注于 B/S 项目开发.累计文章阅读量超过一千万,我的博客主页地址:https://www.itsvse.com/blog_xzz.html 只需要设置JsonSe ...
- LAMP集成环境搭建
本教程是在centos6.8 64位系统下进行操作 我们首先准备搭建LAMP环境 LAMP指的是Linux.Apache.MySQL 和 PHP 如果要安装PHP5.5 需要 首先rpm -ivh h ...
- JS：获取标签的6个方法+获取html+获取body
JS 获取标签的方法 通过class: document.getElementsByClassName('class名');返回数组通过name: document.getElementsByName ...
- 浅析Thread的join() 方法
Thread中的 join() 方法在实际开发过程中可能用的不是很多,但是在面试中作为考察基本功知识的扎实与否,经常会被用到.因此,对于 Thread 的 join() 方法进行了一定的研究. 常见的 ...
- tsocks代理git wget
使用clash时, 命令行的wget和git操作可能没有被代理 安装tsocks: apt-get install tsocks 修改配置文件: vi /etc/tsocks.conf 找到: ser ...
- springBoot代码和依赖分开打包
目的: 1.分离代码和依赖(包括第三方的引入包) 2.分离配置文件到外部 3.修改/META-INF/MANIFEST.MF中加载依赖包的位置和启动类,包含第三方依赖jar包 先查看项目的结构 由于我 ...
- VS打包程序步骤
1.下载打包的程序 2.在你的程序里面安装打包的项目 3.添加项目输出 4.为项目添加必要的文件 双击前面建立好的主输出 一般文件为一些配置文件(如使用Nlog写日志,需要添加Nlog的配置文件)和图 ...
- 54.Python中Meta类常见的配置
对于一些模型级别的配置.我们可以通过在模型中定义一个类,叫做Meta.然后在这个类中添加一些属性来控制模型的作用. 注意:添加的这个类一定要是Meta,否者的话Django就会不能够识别. from ...
- HDU2612 Find a way （双广搜）
Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. Leave Ningbo one year ...