表单控件在实际开发中是极为常见的。特别是对于用户信息的提交，需要大量的表单。Vue中使用v-model指令来实现表单元素和数据的双向绑定。此篇记录下其原理，以及当时学习时候的一些小尝试以及修饰符。

v-model的原理

v-model其实是一个语法糖。v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。它背后的本质实际上是包含着两个操作：1.v-bind绑定一个value属性；2.v-on指令给当前元素绑定input事件。

<input type="text" v-model="message">

等同于

<input type="text" v-bind:value="message" v-on:input="message= $event.target.value">

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<div id="app">

<!--  语法糖写法-->

  <!--<input type="text" v-model="message">-->

  <!--<input type="text" :value="message" @input="valueChange">-->

  <input type="text" :value="message" @input="message = $event.target.value">

  <h2>{{message}}</h2>

</div>

<script src="../js/vue.js"></script>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      message: '你好啊'

    },

    methods: {

      valueChange(event) {

        this.message = event.target.value;

      }

    }

  })

</script>

</body>

</html>

上述代码中，$event.target.value。$event为当前的事件对象，$event.target.value指的是当前input中的值。methods中的event.target.value的意思为获取当前文本框的值（当事件触发时）。

即等同于：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<div id="app">

  <input type="text" v-model="message">

  {{message}}

</div>

<script src="../js/vue.js"></script>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      message: '你好啊'

    }

  })

</script>

</body>

</html>

v-model：radio

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<div id="app">

  <label for="male">

    <input type="radio" id="male" value="男" v-model="sex">男

  </label>

  <label for="female">

    <input type="radio" id="female" value="女" v-model="sex">女

  </label>

  <h2>您选择的性别是: {{sex}}</h2>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      message: '你好啊',

      sex: '女'

    },

    methods:{

      vm(event){

        this.sex= event.target.value

      }

    }

  })

</script>

</body>

</html>

在学习过程中，遇到了一些需要注意的点：

1、input中的radio，只有name相同时或者使用v-model进行绑定同一事件时，才会产生选择的互斥。

2、label标签中的for绑定的是input中的id名。

3、label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

v-model：checkbox

checkbox的单选框：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<div id="app">

  <!--1.checkbox单选框-->

  <label for="agree">

    <input type="checkbox" id="agree" v-model="isAgree">同意协议

  </label>

  <h2>您选择的是: {{isAgree}}</h2>

  <button :disabled="!isAgree">下一步</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      message: '你好啊',

      isAgree: false // 单选框

    }

  })

</script>

</body>

</html>

单个勾选框的情况下，v-model绑定的是个布尔值。

checkbox的多选框：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<div id="app">

  <h2>您的爱好是: {{hobbies}}</h2>

  <label v-for="item in originHobbies" :for="item" :key="index">

    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}

  </label>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      message: '你好啊',

      isAgree: false, // 单选框

      hobbies: [], // 多选框,

      originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']

    }

  })

</script>

</body>

</html>

v-model：select

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<div id="app">

  <!--1.选择一个-->

  <select name="abc" v-model="fruit">

    <option value="苹果">苹果</option>

    <option value="香蕉">香蕉</option>

    <option value="榴莲">榴莲</option>

    <option value="葡萄">葡萄</option>

  </select>
<h2>您选择的水果是: {{fruit}}</h2>
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script> 
const app = new Vue({ 
el: '#app',
 data: { 
fruit: '香蕉', 
fruits: [] } }) 

</script> 
</body> 
</html>

v-model修饰符：

v-model有三个修饰符。分别为lazy、number、trim。

lazy修饰符： 默认情况下，v-model默认是在input事件中同步输入框的数据的。 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。 lazy修饰符可以让数据在失去焦点或者回车时才会更新。

number修饰符： 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。number修饰符可以让在输入框中输入的内容自动转成数字类型。

trim修饰符： 如果输入的内容首尾有很多空格，通常我们希望将其去除 trim修饰符可以过滤内容左右两边的空格。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<div id="app">

  <!--1.修饰符: lazy-->

  <input type="text" v-model.lazy="message">

  <h2>{{message}}</h2>

  <!--2.修饰符: number-->

  <input type="number" v-model.number="age">

  <h2>{{age}}-{{typeof age}}</h2>

  <!--3.修饰符: trim-->

  <input type="text" v-model.trim="name">

  <h2>您输入的名字:{{name}}</h2>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      message: '你好啊',

      age: 0,

      name: ''

    }

  })

</script>

</body>

</html>

表单绑定v-model的更多相关文章

  1. Spirng MVC +Velocity 表单绑定命令对象

    通常,表单中的数据在提交之后可以通过Spring MVC的@RequestParam注解在控制器函数的参数列表中中提取出来,但是一旦表单数据过多的话,参数列表将会变得非常长,最好的解决方案是将表单中的 ...

  2. Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  3. Knockout学习之表单绑定器（上）

    表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然 ...

  4. vue -- v-model 表单绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue基础-动态样式&表单绑定&vue响应式原理

    动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...

  6. Vue学习笔记之表单绑定输入

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  7. KnockoutJS 3.X API 第四章 表单绑定(9) value绑定

    目的 value绑定主要用于DOM元素给视图模型赋值用的.通常用于<input><select><textarea>等元素. value绑定与text绑定的区别在于 ...

  8. vue form表单绑定事件与方法

    使用v-on绑定事件 <button @click="hello">Hello</button><br /> <button @click ...

  9. 用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。

    Vue3 的父子组件传值.绑定表单数据.UI库的二次封装.防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法. 基础使用方法 Vue3对于表单的绑定提供了一 ...

  10. KnockoutJS 3.X API 第四章 表单绑定(10) textInput、hasFocus、checked绑定

    textInput绑定目的 textInput绑定主要用于<input>或者<textarea>元素.他提供了DOM和viewmodel的双向更新.不同于value绑定,tex ...

随机推荐

  1. vue中全局/按需引用element，样式都不生效

    简直是天坑啊,这个问题困扰了我一个晚上加今天一天,心里无数草泥马奔腾 被要求使用vue1.0+elementUI做一个后台管理项目,结果无论怎么操作elementUI,页面中都不显示css样式 谷歌百 ...

  2. vue回调接口

    1.微博回调接口 1.1oauth/urls.py 中添加路由 urlpatterns = [ path('weibo/callback/', views.OauthWeiboCallback.as_ ...

  3. 用java以正确的姿势刷CSP

    许多程序算法考试中,用java是个不错的选择,它几乎实现了所有c++能实现的,所以越来越受Acmer的欢迎.总结一下用到的一些技巧和方法.更多关于csp的可参考海岛blog|皮卡丘 1． 输出 规格化 ...

  4. 性能测试学习之路 （一）认识jmeter(性能测试流程 && 性能测试通过标准 &&jmeter体系结构)

    性能测试是通过自动化的测试工具模拟多种正常.峰值以及异常负载条件来对系统的各项性能指标进行测试. 1 性能测试技能树 性能测试是一项综合性的工作,致力于暴露性能问题,评估系统性能趋势.性能测试工作实质 ...

  5. MongoDB 复合索引结构

  6. 题解 CF1428G Lucky Numbers (Easy Version and Hard Version)

    这题没有压行就成 \(\texttt{Hard Version}\) 最短代码解了( 要知道这题那么 \(sb\) 就不啃 \(D\) 和 \(E\) 了. \(\texttt{Solution}\) ...

  7. 【Codeforces 1181E】A Story of One Country (Easy & Hard)（分治 & set）

    Description 在一个二维平面上有若干个矩形.定义一个矩形的(或有边在无限远处)区域为符合条件的条件为: 这个区域仅包含一个矩形,且不能使边界穿过任何一个矩形的内部. 这个区域可以用一个水平或 ...

  8. Fisco Bcos学习资料连接

    大牛博客:http://m.blog.csdn.net/sportshark FISCO BCOS学习资料索引;http://kb.bsnbase.com/webdoc/view/Pub4028813 ...

  9. HDFS 操作命令

    本地文件系统创建一个文件,输入带姓名学号信息. 查看新建文件所在目录 查看新建文件内容 将此文件上传到HDFS文件系统上的用户目录 HDFS上查看相应目录 HDFS上查看文件内容 HDFS上查看文件大 ...

  10. Swing01-概述

    1.Swing概述 Swing百分之百由Java本身实现,是一套轻量级组件(完全由Java实现的组件叫做轻量级套件,依赖于本地平台的套件称之为重量级套件).Swing不再依赖于平台的GUI,因此真正做 ...