vue中的表单
v-model指令实现表单双向绑定数据。触发文本框的input事件。
一、文本框
<div id="J_app">
<p>{{ info }}</p>
<input v-model.trim="info">
</div>
var vapp = new Vue({
el: '#J_app',
data: {
info: 'Hello Vue!'
}
})
二、单选框
<div id="J_app">
<input type="radio" id="male" value="male" v-model="ro">
<label for="male">male</label>
<br>
<input type="radio" id="female" value="female" v-model="ro">
<label for="female">female</label>
<br>
<span>性别:{{ ro }}</span>
</div>
var vapp = new Vue({
el: '#J_app',
data: {
ro: ''
}
})
三、复选框
1、一个勾选框
<div id="J_app">
<input type="checkbox" id="J_ckb" v-model="ckb">
<label for="checkbox">{{ ckb }}</label>
</div>
var vapp = new Vue({
el: '#J_app',
data: {
ckb: ''
}
})
2、多个勾选框
<div id="J_app">
<input type="checkbox" id="html" value="html" v-model="ckbs">
<label for="html">html</label>
<input type="checkbox" id="css" value="css" v-model="ckbs">
<label for="css">css</label>
<input type="checkbox" id="js" value="js" v-model="ckbs">
<label for="js">js</label>
<br>
<span>你学过哪些:{{ ckbs }}</span>
</div>
var vapp = new Vue({
el: '#J_app',
data: {
ckbs: []
}
})
3、多个动态勾选框
如果是动态复选框,怎么写?如果要实现全选,反选,怎么写?看这里。
四、选择列表
1、单选
<div id="J_app">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>vuejs</option>
<option>reactjs</option>
<option>angularjs</option>
</select>
<span>我选择: {{ selected }}</span>
</div>
var vapp = new Vue({
el: '#J_app',
data: {
selected: ''
}
})
2、多选
<div id="J_app">
<select v-model="selected" multiple style="width: 50px;">
<option disabled value="">请选择</option>
<option>vuejs</option>
<option>reactjs</option>
<option>angularjs</option>
</select>
<span>我选择: {{ selected }}</span>
</div>
var vapp = new Vue({
el: '#J_app',
data: {
selected: []
}
})
3、动态选
<div id="J_app">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>我选择: {{ selected }}</span>
</div>
var vapp = new Vue({
el: '#J_app',
data: {
selected: '0',
options: [
{ text: 'vuejs', value: '0' },
{ text: 'reactjs', value: '1' },
{ text: 'angularjs', value: '2' }
]
}
})
vue中的表单的更多相关文章
- vue中的表单异步校验方法封装
在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...
- 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- VUE中关于表单提交的简单实现
main.js import Vue from "../vue.js"; import App from "./App.js"; //启动 new Vue({ ...
- Vue中Form表单验证无法消除验证问题
iView的表单api给出了一个resetFields方法,用于重置整个表单输入的内容并清除验证提示. 但是有时候需要只消除部分的iview的resetFields方法源码是这样的resetField ...
- vue中form 表单常用校验封装(async-validator)
新建一个js校验文件validate.js export const regular = { // 验证自然数 naturalNumber: /^(([0-9]*[1-9][0-9]*)|(0+))$ ...
- vue中提交表单后如何清空
只需要在提交方法里写上this.form={brand_right:0}即可.
- vue中的表单验证
http://www.cnblogs.com/luoxuemei/p/9295506.html /*是否合法IP地址*/ export function validateIP(rule, value, ...
- vue动态生成表单
vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...
- Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...
随机推荐
- NMT 机器翻译
本文近期学习NMT相关知识,学习大佬资料,汇总便于后期复习用,有问题,欢迎斧正. 目录 RNN Seq2Seq Attention Seq2Seq + Attention Transformer Tr ...
- 拓展中国剩余定理(ex_crt)
一般来讲,crt(中国剩余定理)比较常见,而ex_crt(拓展中国剩余定理)不是很常用 但是noi 2018偏偏考了这么个诡异的东西... 所以这里写一个ex_crt模板 模型: 求一个x满足上述方程 ...
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- Loadrunner常用目录、组成部分及负载测试流程
常用目录 bin:存放一些可执行程序 classes:可能用到的jar包 My Template:存放一些自己创建的模板 include:头文件(可以编写自定义函数,保存成.h的头文件形式并放在这个目 ...
- C++ 内链接 外链接
编译的时候(假如编译器是VS),是以源文件cpp文件为单位,编译成一个个的obj文件,然后再通过链接器把不同的obj文件链接起来.如果一些变量或函数的定义是内连接的话,链接器链接的时候就不会拿它们去与 ...
- tomcat安装出现的闪退问题
如果闪退 在该文件中结尾添加pause 可以检测到路径问题是不是有问题
- 下载离线VS2017
1.下载工具 版本 文件 Visual Studio Enterprise (企业版) vs_enterprise.exe Visual Studio Professional (专业版) vs_pr ...
- MVC Filter
一.Filter在MVC生命周期中的位置 1.IIS中传递请求到程序2.MVC根据Routing来选择由哪个Controller/Action来处理3.Controller调用Model(业务逻辑)来 ...
- springboot学习(一):创建项目
package com.glory.demo.Controller; import org.springframework.stereotype.Controller; import org.spri ...
- C# 之设计原则
代码也需要有秩序,就像世界需要秩序,基于SOLID architecture principles. 一.SOLID原则 S.O.L.I.D.是一组面对面向对象设计的最佳实践的设计原则.术语来自Rob ...