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 ...
随机推荐
- 我国自主开发的编程语言“木兰”居然是一个披着“洋”皮的Python！
究竟是真“自主”,还是又一个披着“洋”皮的“红芯浏览器”? 作者 | 沉迷单车的追风少年 出品 | CSDN博客 昨天看到新闻: ! 心头一震,看起来很厉害啊!毕竟前几天美国宣布要对中国AI软 ...
- javascript当中arguments用法
8)arguments 例 3.8.1<head> <meta http-equiv="content-type" content="text/h ...
- java递归方法分析
测试题目: 使用递归方式判断某个字串是否是回文( palindrome )“回文”是指正着读.反着读都一样的句子.比如“我是谁是我” 设计思路: 第一,判断是不是回文序列的条件是每一对对称位置的字符是 ...
- hdu 2187 悼念512汶川大地震遇难同胞——老人是真饿了（贪心）
新人题:n2的排序就可以过 #include <stdio.h> #include <stdlib.h> int main() { int c,n,i,j,o; ],b[],m ...
- 1级搭建类112-Oracle 19c SI FS（CentOS 8）
Oracle 19c 单实例文件系统在 CentOS 8 上的静默安装
- 0级搭建类007-Ubuntu Desktop Linux安装 (18.04.2) 公开
项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...
- 2019-08-21 纪中NOIP模拟A组
T1 [JZOJ6315] 数字 题目描述
- 通过nginx实现多个域名访问同一个服务器
一台服务器通过nginx配置多个域名(80端口) 参考:https://www.cnblogs.com/ruanjianlaowang/p/11182486.html 1. 问题描述 多个域名对应一 ...
- 关于Euler-Poisson积分的几种解法
来源:https://www.cnblogs.com/Renascence-5/p/5432211.html 方法1:因为积分值只与被积函数和积分域有关,与积分变量无关,所以\[I^{2}=\left ...
- the import javax.jms cannot be resolved问题
JDK中并没有javax.jms包,你需要一个JMS实现(比如:activemq),并确认相应的jar被包含在CLASSPATH中. http://activemq.apache.org/ 5.5.0 ...