<!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 表单绑定的更多相关文章

  1. Vue表单绑定(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  2. vue基础-动态样式&表单绑定&vue响应式原理

    动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...

  3. 【VUE】3.表单操作

    1. Form组件渲染 1. components -> 新增组件Form.vue <template> <div>表单验证</div> </templ ...

  4. 用Typescript 的方式封装Vue3的表单绑定,支持防抖等功能。

    Vue3 的父子组件传值.绑定表单数据.UI库的二次封装.防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法. 基础使用方法 Vue3对于表单的绑定提供了一 ...

  5. Spirng MVC +Velocity 表单绑定命令对象

    通常,表单中的数据在提交之后可以通过Spring MVC的@RequestParam注解在控制器函数的参数列表中中提取出来,但是一旦表单数据过多的话,参数列表将会变得非常长,最好的解决方案是将表单中的 ...

  6. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  7. Vue+Element-Ui 异步表单效验

    简单的效验 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名 /* ruleForm :表单绑定的数 ...

  8. Knockout学习之表单绑定器(上)

    表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然 ...

  9. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 吴裕雄--天生自然 python数据分析:医疗费数据分析

    import numpy as np import pandas as pd import os import matplotlib.pyplot as pl import seaborn as sn ...

  2. 【新人赛】阿里云恶意程序检测 -- 实践记录11.3 - n-gram模型调参

    主要工作 本周主要是跑了下n-gram模型,并调了下参数.大概看了几篇论文,有几个处理方法不错,准备下周代码实现一下. xgboost参数设置为: param = {'max_depth': 6, ' ...

  3. C#中调用Windows系统服务exe程序的工具类与重启服务的流程

    场景 使用C#编写的Windows服务程序,在Winform中进行调用. 常用工具类方法检测服务是否存在或者安装,获取服务状态,启动服务,停止服务的方法. 以在Winform中重启服务为例. 注: 博 ...

  4. c++精度

  5. JAVA->查询并显示输入根目录下全部的文件所在目录路径

    public static boolean qf(File f,boolean a){      boolean b=false;   if(a==true){      File[] fl=f.li ...

  6. C语言->关于文件数据的录入和输出调用的函数总结

    数据输入输出对象之间的关系图: 函数使用说明: 1.一个字符的输入\输出,对象是键盘(缓存和屏幕) 1.1.getchar(a),putchar(a); 1.2.scanf(“%d”,&i), ...

  7. list=null和list.size=0的区别

    声明转载自:https://blog.csdn.net/iblade/article/details/50506398/ 转载自:https://blog.csdn.net/Hallelujah__/ ...

  8. 基于STL的字典生成模块-模拟搜索引擎算法的尝试

    该课题来源于UVA中Searching the Web的题目:https://vjudge.net/problem/UVA-1597 按照题目的说法,我对按照特定格式输入的文章中的词语合成字典,以满足 ...

  9. send and recieve message with myself (python socket )

    # socket server import socket sk = socket.socket() sk.bind(("127.0.0.1",8082)) sk.listen() ...

  10. py 二级习题(加密与解密)

    题目: 1.比如说,我想    “我喜欢月月”  这句话加密即:将字符串中的每个字符的unicode值全都向后移动三位,即unicode 值加3,然后输出. 2.将按照上述规则加密的文字解密即:将字符 ...