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

  1. vue中的表单异步校验方法封装

    在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...

  2. 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  3. VUE中关于表单提交的简单实现

    main.js import Vue from "../vue.js"; import App from "./App.js"; //启动 new Vue({ ...

  4. Vue中Form表单验证无法消除验证问题

    iView的表单api给出了一个resetFields方法,用于重置整个表单输入的内容并清除验证提示. 但是有时候需要只消除部分的iview的resetFields方法源码是这样的resetField ...

  5. vue中form 表单常用校验封装(async-validator)

    新建一个js校验文件validate.js export const regular = { // 验证自然数 naturalNumber: /^(([0-9]*[1-9][0-9]*)|(0+))$ ...

  6. vue中提交表单后如何清空

    只需要在提交方法里写上this.form={brand_right:0}即可.

  7. vue中的表单验证

    http://www.cnblogs.com/luoxuemei/p/9295506.html /*是否合法IP地址*/ export function validateIP(rule, value, ...

  8. vue动态生成表单

    vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  9. Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

随机推荐

  1. NMT 机器翻译

    本文近期学习NMT相关知识,学习大佬资料,汇总便于后期复习用,有问题,欢迎斧正. 目录 RNN Seq2Seq Attention Seq2Seq + Attention Transformer Tr ...

  2. 拓展中国剩余定理(ex_crt)

    一般来讲,crt(中国剩余定理)比较常见,而ex_crt(拓展中国剩余定理)不是很常用 但是noi 2018偏偏考了这么个诡异的东西... 所以这里写一个ex_crt模板 模型: 求一个x满足上述方程 ...

  3. 在vue项目中使用axios发送FormData

    这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的    使用 application/x-www-form-ur ...

  4. Loadrunner常用目录、组成部分及负载测试流程

    常用目录 bin:存放一些可执行程序 classes:可能用到的jar包 My Template:存放一些自己创建的模板 include:头文件(可以编写自定义函数,保存成.h的头文件形式并放在这个目 ...

  5. C++ 内链接 外链接

    编译的时候(假如编译器是VS),是以源文件cpp文件为单位,编译成一个个的obj文件,然后再通过链接器把不同的obj文件链接起来.如果一些变量或函数的定义是内连接的话,链接器链接的时候就不会拿它们去与 ...

  6. tomcat安装出现的闪退问题

    如果闪退 在该文件中结尾添加pause  可以检测到路径问题是不是有问题

  7. 下载离线VS2017

    1.下载工具 版本 文件 Visual Studio Enterprise (企业版) vs_enterprise.exe Visual Studio Professional (专业版) vs_pr ...

  8. MVC Filter

    一.Filter在MVC生命周期中的位置 1.IIS中传递请求到程序2.MVC根据Routing来选择由哪个Controller/Action来处理3.Controller调用Model(业务逻辑)来 ...

  9. springboot学习(一):创建项目

    package com.glory.demo.Controller; import org.springframework.stereotype.Controller; import org.spri ...

  10. C# 之设计原则

    代码也需要有秩序,就像世界需要秩序,基于SOLID architecture principles. 一.SOLID原则 S.O.L.I.D.是一组面对面向对象设计的最佳实践的设计原则.术语来自Rob ...