表单绑定v-model
表单控件在实际开发中是极为常见的。特别是对于用户信息的提交，需要大量的表单。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的更多相关文章
- Spirng MVC +Velocity 表单绑定命令对象
通常,表单中的数据在提交之后可以通过Spring MVC的@RequestParam注解在控制器函数的参数列表中中提取出来,但是一旦表单数据过多的话,参数列表将会变得非常长,最好的解决方案是将表单中的 ...
- Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Knockout学习之表单绑定器（上）
表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然 ...
- vue -- v-model 表单绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue基础-动态样式&表单绑定&vue响应式原理
动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...
- Vue学习笔记之表单绑定输入
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- KnockoutJS 3.X API 第四章 表单绑定(9) value绑定
目的 value绑定主要用于DOM元素给视图模型赋值用的.通常用于<input><select><textarea>等元素. value绑定与text绑定的区别在于 ...
- vue form表单绑定事件与方法
使用v-on绑定事件 <button @click="hello">Hello</button><br /> <button @click ...
- 用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。
Vue3 的父子组件传值.绑定表单数据.UI库的二次封装.防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法. 基础使用方法 Vue3对于表单的绑定提供了一 ...
- KnockoutJS 3.X API 第四章 表单绑定(10) textInput、hasFocus、checked绑定
textInput绑定目的 textInput绑定主要用于<input>或者<textarea>元素.他提供了DOM和viewmodel的双向更新.不同于value绑定,tex ...
随机推荐
- Python使用property函数和使用@property装饰器定义属性访问方法的异同点分析
Python使用property函数和使用@property装饰器都能定义属性的get.set及delete的访问方法,他们的相同点主要如下三点: 1.定义这些方法后,代码中对相关属性的访问实际上都会 ...
- PyQt（Python+Qt）学习随笔：QTreeView树形视图的wordWrap属性
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTreeView树形视图的wordWrap属性用于控制视图展示数据项文本的单词换行原则,如果该值为 ...
- PyQt(Python+Qt)学习随笔：Qt Designer中主窗口对象的dockOptions属性
dockOptions属性代表主窗口对浮动部件停靠的反应,其类型为枚举类型QMainWindow.DockOptions.相关取值及含义如下: 这些枚举值可以组合使用,仅控制如何在QMainWindo ...
- java中的反射(一)
在之前学java基础时学习过反射,但在因为没有相应的应用场景,所以也是一知半解.最近在学spring的时候发现反射是其中很重要的一部分,所以回顾一下,并看看它在spring中的应用. 目录 一.反射 ...
- react-admin-plus 正式开源, 欢迎star
简介 基于react.ant-ui.typescript的前端微服务框架.欢迎star. 在线地址 在线demo 项目介绍 沉淀了几个月的时间,这款框架终于正式的和大家见面了! 先说一下我做这 ...
- Python术语对照表
>>> 交互式终端中默认的 Python 提示符.往往会显示于能以交互方式在解释器里执行的样例代码之前. ... 可以是指:交互式终端中输入特殊代码行时默认的 Python 提示符, ...
- 题解 CF1428F Fruit Sequences
\(\texttt{Bullshit}\) 蒟蒻 \(\texttt{7 min}\) 切 \(\texttt{F}\), 挽回了本一定掉分的局面/cy 分竟然还没有别人 5 题高 (本题解为目前 c ...
- 三、Zookeeper简介
一.简介 zookeeper 主要使用场景:分布式系统的分布式协同服务.协同工作就是通过某种方式,让着节点的信息能够同步和共享,依赖于进程间的通信.通信方式有俩种. 通过网络进行信息共享 现实工作中, ...
- Day5 - 03 函数的参数-位置参数和默认参数
位置参数 调用函数时,传入函数的参数,按照位置顺序依次赋值给函数的参数.#计算乘方的函数 def power(x, n): s = 1 ...
- IOS实现自动定位和手动选择城市功能
IOS自动定位使用的是高德地图SDK 在高德开放平台http://lbs.amap.com/api/ios-sdk/down/ 下载2D地图SDK和搜索SDK 将SDK导入工程内 按照高德的配置说明进 ...