主要是通过 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. [java] 将整数在千分位或万分位以逗号分隔表示

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

  2. 【论文学习】A Fuzzy-Rule-Based Approach for Single Frame Super Resolution

    加尔各答印度统计研究所,作者: Pulak Purkait (pulak_r@isical.ac.in) 2013 年 代码:CodeForge.cn http://www.codeforge.cn/ ...

  3. Sklearn-train_test_split随机划分训练集和测试集

    klearn.model_selection.train_test_split随机划分训练集和测试集 官网文档:http://scikit-learn.org/stable/modules/gener ...

  4. linux下编译安装ACE-6.4.2（adpative communication environment）

    1.环境 CentOS-6.5-x86_64-bin-DVD1.iso VMware_workstation_full_12.5.2 (2).exe ACE-6.4.2.tar.gz 下载链接:htt ...

  5. 适用于hips ui的iPhoneX及以上适配方案

    版本信息: hips ui: 0.1.43 须知: 随着hips ui的迭代,可能会解决适配问题,所以下面的方案是有时效性的. 如果你项目上很紧急,可以直接看第三部分解决方案,复制粘贴代码即可. 一. ...

  6. Array.ConvertAll<TInput, TOutput> 数组相互转化方法

    有个需求,把char数组转换为int数组,然后噼里啪啦就弄了这样一堆代码: public static int[] CharArrToIntArr(char[] charArr) { int[] in ...

  7. Cell中实现多图展示

    实现的效果如下: 主要实现代码如下: // // DetailCell.m // Floral // // Created by 思 彭 on 16/9/21. // Copyright © 2016 ...

  8. java数据结构之ConcurrentHashMap

    大神博客:https://www.cnblogs.com/study-everyday/p/6430462.html https://baijiahao.baidu.com/s?id=16170899 ...

  9. wdScrollTab

    wdScrollTab是一个采用jQuery实现的Tab面板,当标签太多超出页面时会自动滚动.支持iframe.ajax调用和动态加载内容.

  10. express服务端

    1. 使用 Node.js + Express 开发服务端 2. 使用 Node.js + Express+MySQL 实现简单的增删改查 3. 初识NodeJS服务端开发(Express+MySQL ...