主要是通过 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. linux(centos7)下安装maven

    Linux下安装maven 1.首先到Maven官网下载安装文件,目前最新版本为3.0.3,下载文件为apache-maven-3.0.3-bin.tar.gz,下载可以使用yum命令: 2.进入下载 ...

  2. js判断是否联网

    // navigator.onLine if (navigator.onLine){ //正常工作 console.log("在线状态............................ ...

  3. TensorFlow错误ValueError: No gradients provided for any variable

    使用TensorFlow训练神经网络的时候,出现以下报错信息: Traceback (most recent call last):   File "gan.py", line 1 ...

  4. centos7 下安装和配置 mongodb （重点）

    1.下载安装包 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.0.4.tgz 2.解压 tar -zxvf m ...

  5. 让 Nginx 支持 WAF 防护功能实战

    ngx_lua_waf 安装说明文档 作者github地址: https://github.com/loveshell/ngx_lua_waf ———————————————————————————— ...

  6. java高级之多线程

    1.1,多线程的作用: *线程是程序执行的一条路径, 一个进程中可以包含多条线程 *多线程并发执行可以提高程序的效率, 可以同时完成多项工作 1.2,多线程的应用场景: * 红蜘蛛同时共享屏幕给多个电 ...

  7. 一百一十五：CMS系统之实现点击更换图形验证码功能

    把验证码渲染到到页面上 访问,显然,是标签有个内边距 去掉内边距 加一个class 如果放大看的话,还有问题 用js实现点击更换图形验证码:生成查询字符串的形式访问图形验证码接口的url,放到img标 ...

  8. ES安装的相关

    es安装https://www.cnblogs.com/jingping/p/9448099.htmlhttps://blog.csdn.net/zhanyu1/article/details/880 ...

  9. js如何控制select展开

    找了一圈也没找到靠谱的方案,后来通过动态的控制select的size属性实现了. 这也算是一种方法吧. 先判断option的数量n,然后把select的size调整到n,当用户选择后,再把size设置 ...

  10. BN和L2 NORM的区别

    bn是拉平各个feature的差异,而l2 norm是拉平各个样本的差异,本来各个样本的模长千变万化,按照距离的概念,差别是很大的,但是l2 norm后,距离就变得有一个上界了,显然样本间差异变小了. ...