主要是通过 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. jwt token and shiro

    openapi可以完全开放访问,也可以使用jwt token进行简单的认证,还可以使用shiro支持更细致的权限管理. handler.yml配置了security和shiro两个handler: s ...

  2. 自定义 TreeView 第三种状态(C#自定义控件)

    本文核心部分采用 http://blog.csdn.net/am2004/article/details/1621349 此网站代码. 在增加了部份事件的同时,将点击图片更改节点选中状态 这一小地方作 ...

  3. springboot 静态资源访问，和文件上传 ，以及路径问题

    springboot 静态资源访问: 这是springboot 默认的静态资源访问路径  访问顺序依次从前到后(http://localhost:8080/bb.jpg) spring.resourc ...

  4. 在React中修改antd的样式

    1.在Component的Radio中加个style={radioStyle}. <RadioGroup> <Radio style={radioStyle} value={}> ...

  5. 注解方式实现AOP编程

    步骤: 1) 先引入aop相关jar文件           (aspectj  aop优秀组件) spring-aop-3.2.5.RELEASE.jar   [spring3.2源码] aopal ...

  6. TelephonyUtils

    <uses-permission android:name="android.permission.CALL_PHONE"/> import java.util.Arr ...

  7. flutter richText富文本

    flutter中富文本使用 RichText( text: TextSpan( text: '登陆即同意', style: TextStyle(fontSize: 14, color: Colors. ...

  8. [转]SQL server 2008R2 中 C#Winfoirm 使用 SqlDependency 机制实现 数据库中某一张表的监视

    转自:https://blog.csdn.net/u012183487/article/details/77776930 System.Data.SqlClient命名空间下的 sqlDependen ...

  9. Linux (Ubuntu)上面安装maven

    1 首先检查linux上是否有maven mvn -v 或者mvn -version 如果没有安装,提示如下: ubuntu@ip----:~$ mvn -v The program 'mvn' ca ...

  10. maven——将jar安装到本地仓库

    环境变量MAVEN_HOME配置正确后,cmd窗口执行此命令: mvn install:install-file -Dfile=C:\hehe.jar  -DgroupId=com.rockontro ...