主要是通过 v-model 对表单元素做数据的 双向绑定. 用法其实也很简单, 只是因为表单元素有不同类型, 处理方式有些许不同, 这点需要注意.

1. 如果是 输入框 , 可以直接使用 v-model="" , 注意这里的 .trim | .number | .lazy 是三个 v-model 的 修饰符. 表示 去除输入内容的收尾空格 | 将输入的字符串转换为数值类型 | 让数据的更新在输入改变时进行.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

  <style>

      .style1 {

          width: 100px; height: 100px; background-color: tomato;

          text-align: center; line-height: 100px; color: white;

          cursor: pointer;

      }

  </style>

</head>

<body>

    <div id="app">

        <form action="">

            <input type="text" v-model.number.trim.lazy="text" />

            <p>{{ text }}</p>

        </form>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            data: {

                text: ""

            }

        })

    </script>

</body>

</html>

2. 表单中的 多选框 和 复选框 中的 v-model 绑定的是 name 属性, 只是数据类型不一样, 多选框 需要用 数组 来装

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

  <style>

      .style1 {

          width: 100px; height: 100px; background-color: tomato;

          text-align: center; line-height: 100px; color: white;

          cursor: pointer;

      }

  </style>

</head>

<body>

    <div id="app">

        <form action="">

            <input id="radio1" type="radio" v-model="radioName" value="radioTest1" />

            <label for="radio1">单选示例1</label>

            <input id="radio2" type="radio" v-model="radioName" value="radioTest2" />

            <label for="radio2">单选示例2</label>

            <p>单选选中状态: {{ radioName }}</p>

            <input id="checkbox1" type="checkbox" v-model="checkboxName" value="checkboxTest1" />

            <label for="checkbox1">多选示例1</label>

            <input id="checkbox2" type="checkbox" v-model="checkboxName" value="checkboxTest2" />

            <label for="checkbox2">多选示例2</label>

            <input id="checkbox3" type="checkbox" v-model="checkboxName" value="checkboxTest3" />

            <label for="checkbox3">多选示例3</label>

            <p>多选选中状态: {{ checkboxName }}</p>

        </form>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            data: {

                radioName: false,

                checkboxName: []

            }

        })

    </script>

</body>

</html>

3. 下面是 下拉列表 的 双向数据绑定

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

  <style>

      .style1 {

          width: 100px; height: 100px; background-color: tomato;

          text-align: center; line-height: 100px; color: white;

          cursor: pointer;

      }

  </style>

</head>

<body>

    <div id="app">

        <form action="">

            <select v-model="selectTest" name="test">

                <option value="">请选择</option>

                <option value="water">水水水</option>

                <option value="fire">火火火</option>

            </select>

            <p>选择: {{ selectTest }}</p>

        </form>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            data: {

                selectTest: ""

            }

        })

    </script>

</body>

</html>

怎样在 Vue 中使用 v-model 处理表单?的更多相关文章

  1. vue中怎么动态生成form表单

    form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持3个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...

  2. Vue3组件（九）Vue + element-Plus + json = 动态渲染的表单控件

    一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...

  3. Formily教程 | formily是中后台复杂场景的表单解决方案

    前言 formily 不是一个简单的前端轮子.Formily 是一个由阿里巴巴集团多 BU 共建的面向中后台复杂场景的表单解决方案,它也是一个表单框架.它的前身是供应链平台在 2019 年初对外开源的 ...

  4. jsp中普通按钮如何提交表单

    jsp中普通按钮如何提交表单方法1: <form action = "提交的地址">         <input type="submit" ...

  5. struts2中token防止重复提交表单

    struts2中token防止重复提交表单 >>>>>>>>>>>>>>>>>>>&g ...

  6. Winform开发框架中工作流模块的业务表单开发

    在我们开发工作流的时候,往往需要设计到具体业务表单信息的编辑,有些是采用动态编辑的,有些则是在开发过程中处理的,各有各的优点,动态编辑的则方便维护各种各样的表单,但是数据的绑定及处理则比较麻烦,而自定 ...

  7. iframe中使用模态框提交表单后,iframe加载父页面的解决方法

    在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...

  8. vue.js基础知识篇(7):表单校验详解

    目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...

  9. Vue.js 2.x笔记：表单绑定（3）

    1. 基础用法 v-model 指令:在表单 input 和 textarea 元素上创建双向数据绑定. 1.1 单行文本(Text) <div id="app"> & ...

  10. vue开发记录--element-ui的form表单label和placeholder国际化遇到的小问题

    <el-form-item label="$t('permission.employeeName')"> <el-input v-model="form ...

随机推荐

  1. vue实战教程

    转载自 https://www.cnblogs.com/sunsets/p/7760454.html

  2. axios中出现两次请求，OPTIONS请求和GET请求

    在项目中发现ajax中出现两次请求,OPTIONS请求和GET请求 查看到浏览器NetWork有两次请求,请求url一样: 查找原因是浏览器对简单跨域请求和复杂跨域请求的处理区别. XMLHttpRe ...

  3. spring boot通过自定义注解和AOP拦截指定的请求

    一 准备工作 1.1 添加依赖 通过spring boot创建好工程后,添加如下依赖,不然工程中无法使用切面的注解,就无法对制定的方法进行拦截 <dependency> <group ...

  4. 20191121-5 Scrum立会报告+燃尽图 02

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/10066 一.小组情况 组长:贺敬文组员:彭思雨 王志文 位军营 徐丽君队名 ...

  5. 简易总结react-hook三大基础

    react-hook的最重要的三大基础 import { useEffect, useState, useContext } from 'react' 1.每一个简单的一句话总结 useEffect ...

  6. CORS和jsonp实现跨域请求

    同源策略:所谓同源是指,域名,协议,端口相同,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略.当浏览器同时打开两个tab页面(两个不同服务器 ...

  7. DML语句

    DML 操作是指对数据库中表记录的操作,主要包括表记录的插入(insert).更新(update).删除(delete)和查询(select),是开发人员日常使用最频繁的操作. 插入记录 表创建好后, ...

  8. delphi数据集查找不定位

    procedure TForm1.Button2Click(Sender: TObject); var R: Variant; begin R := MemTableEh1.Lookup('Name' ...

  9. A simple dynamic library implemented in C# 4.0 to deal with XML structure

    https://github.com/cardinals/XmlToObjectParser A simple dynamic library implemented in C# 4.0 to dea ...

  10. 【Linux】配置SSH免密登录

    环境说明 假设我们有三台机器分别为bigdata111,bigdata112,bigdata113,三台机器均为centos 7系统. 配置SSH免密登录 (1)利用Xshell的发送键输入到所有会话 ...