主要是通过 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. 【Redis 设置Redis使用LRU算法】

    转自:http://ifeve.com/redis-lru/ 本文将介绍Redis在生产环境中使用的Redis的LRU策略,以及自己动手实现的LRU算法(php) 1.设置Redis使用LRU算法 L ...

  2. Spring AOP潜入易懂的讲解

    为什么会有面向切面编程(AOP),我们知道Java是一个面向对象(OOP)的语言,但它有一些弊端,比如当我们需要为多个不具有继承关系的对象引入一个公共行为,例如日志,权限验证,事务等功能时,只能在每个 ...

  3. MySQL所谓的脏页和“抖”一下是什么联系？

    在我们平时经常用到的sql更新语句,之前是认为只要sql执行,当前sql的操作会立马执行到服务器磁盘上并返回,但是后来我才知道,事实并非如此,在了解事实之前,首先可能需要先了解什么是redo log, ...

  4. ES6中的模板字符串使用方法

    传统的 JavaScript 语言,输出模板通常是这样写的. $('#result').append( 'There are <b>' + basket.count + '</b&g ...

  5. Qt 单元测试

      使用Qtcreator 自带的单元测试工具框架QTestlib进行测试. 一.创建一个单元测试程序 new project->other project ->Qt unit test ...

  6. 使用 docker 快速安装 oracle 11g

    前言 我们在手动安装oracle数据库时,安装步骤纷繁复杂,耗时较长 在此介绍如何使用docker快速安装oracle 11g 一.docker 及其安装环境 操作系统: [root@centos7 ...

  7. [java] 将整数在千分位或万分位以逗号分隔表示

    简单使用DecimalFormat的功能就能做到了,代码如下: package com.testEmp; import java.text.DecimalFormat; public class Nu ...

  8. 实时更新DataGridView 合计值

    public partial class Form1 : Form { public Form1() { InitializeComponent(); dataGridView1.DataSource ...

  9. DisplayUtils

    import android.app.Activity; import android.content.Context; import android.graphics.Rect; import an ...

  10. [Java复习] 集合框架 Collection

    Q1 Collection java的集合以及集合之间的继承关系? 数组和链表的区别? 固定长度,连续内存,不能扩展,随机访问快,插入删除慢.链表相反 List, Set, Map的区别? List, ...