网站首页 > 知识剖析 正文
阅读本文约需要10分钟，您可以先关注我们，避免下次无法找到。
本篇文章成哥继续带大家来学习前端VUE教程，今天主要讲解VUE的表单处理等知识点。下面我们就一起来学习该块内容吧！
01 简介
在日常开发中，我们经常需要对表单元素进行操作，对表单的数据收集和绑定也是很常见的工作。在以前开发时我们是通过直接操作DOM实现的，效率低下。而VUE框架为我们提供了v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。大大提高了开发效率。
02 基础用法
用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
a）text和textarea元素使用value property和input事件
b）checkbox和radio使用checked property和change事件
c）select字段将value作为prop并将change作为事件
1）文本
通过v-model与input框进行双向绑定，实现数据的实时同步更新，具体使用方法如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--通过v-model绑定values值，input输入的值将在p标签中展示出来-->
<input v-model="values" placeholder="请输出内容" />
<p>input输入的内容为: {{ values }}</p>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
values: ""
},
})
</script>
</body>
</html> 2）多行文本
多行文本绑定与input绑定类似，具体使用如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<span>多行文本示例:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="请输入多行文本"></textarea>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
message: ""
},
})
</script>
</body>
</html> 3）复选框
v-model同样可以对复选框进行双向绑定，具体示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<span>单选框示例:</span>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<br>
<span>多选框示例</span>
<!-- 多选框绑定的变量需要是数组类型 -->
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
checked: "",
checkedNames: []
},
})
</script>
</body>
</html> 4）单选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<span>单选按钮:</span>
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
picked: ''
},
})
</script>
</body>
</html> 5）选择框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<span>单选框示例:</span>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>单选框选中项: {{ selected }}</span>
<br>
<span>多选示例:</span>
<!-- 跟复选框类似多选一般绑定的变量也必须数组类型 -->
<select v-model="selectedMultiple" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>多选框选中项: {{ selectedMultiple }}</span>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
selected: '',
selectedMultiple: []
},
})
</script>
</body>
</html> 03 值绑定
对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select> 但是有时我们可能想把值绑定到 Vue 实例的一个动态 property 上，这时可以用 v-bind 实现，并且这个 property 的值可以不是字符串，v-bind具体使用如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<!-- 直接bind对象 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
selected: ""
},
})
</script>
</body>
</html> 04 修饰符
之前的文章中我们讲解了按键修饰符、系统修饰符同样VUE也提供了表单处理的修饰符，下面我们就一起来看看常用的表单处理修饰符。
1）.lazy修饰符
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件之后再进行同步，具体如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
<p>input内容: {{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
msg: ""
},
})
</script>
</body>
</html> 2）.number修饰符
如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符
<input v-model.number="age" type="number"> 这通常很有用，因为即使在type="number"时，HTML 输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析，则会返回原始的值。
3）.trim修饰符
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
<input v-model.trim="msg"> 05 总结
至此我们《VUE基础教程七》就讲完了，下篇内容主要讲解VUE的组件相关知识，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
相关阅读：
- 上一篇： HTML标签之表单标签
- 下一篇： Dreamweaver/Html常用标签(代码)含义汇总
猜你喜欢
- 2024-11-19 HTML的表单标签
- 2024-11-19 HTML编码规范
- 2024-11-19 Dreamweaver/Html常用标签(代码)含义汇总
- 2024-11-19 HTML标签之表单标签
- 2024-11-19 10个免费的HTML在线编辑工具
- 2024-11-19 jquery获取选中的checkbox复选框的值
- 2024-11-19 这些 CSS 伪类，你可能还不知道，可以用起来了
- 2024-11-19 前端入门——css伪类和伪元素
- 2024-11-19 HTML-注册页面 212
- 2024-11-19 程序员都必掌握的前端教程之HTML基础教程(下)
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)