Vue学习系列 -- v-model指令与表单元素学习
Posted 躬匠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习系列 -- v-model指令与表单元素学习相关的知识，希望对你有一定的参考价值。
这一节我们主要要学习的就是v-model指令，v-model用于表单类元素上双向绑定数据。
常见的表单元素就是input textarea 单选按钮 双选按钮 下拉列表等。这里，我做了一个简单的注册表单信息提交demo，并将用户提交的信息实时打印出来，废话少说，直接上代码。
下面的demo并未使用UI组件库，所以界面看起来可能有点丑陋，不过已经能说明问题了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model与表单元素结合使用</title>
</head>
<body>
<div id="app1">
<!--input表单使用-->
<div>
<label for="username">姓名:</label><input type="text" id="username" placeholder="input your name" v-model="username">
<br/>
<label for="sex">性别:</label>
<input type="radio" v-model="sex" value="男">男</input>
<input type="radio" v-model="sex" value="女">女</input>
<br/>
<label for="age">年龄:</label>
<select v-model="age" id="age">
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
<br/>
<label for="hobby">爱好:</label>
<input id="hobby" type="checkbox" v-model="hobby" value="看定影"/>看定影
<input id="hobby" type="checkbox" v-model="hobby" value="读书"/>读书
<input id="hobby" type="checkbox" v-model="hobby" value="旅游"/>旅游
<input id="hobby" type="checkbox" v-model="hobby" value="打游戏"/>打游戏
<br/>
<label for="reason">申请原因:</label>
<br/>
<textarea v-model="reason" placeholder="input you register reason">
</textarea>
</div>
<div>
您提交的个人信息如下：<br/>
<span>姓名：username</span><br/>
<span>性别：sex</span><br/>
<span>年龄：age</span><br/>
<span>爱好：hobby</span><br/>
<span>申请原因：reason</span>
</div>
</body>
<!--这里是以CDN引入的方式加载的vue.js-->
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
new Vue(
el : "#app1", //指定绑定的DOM元素
data :
username : "please input your name",
sex : "男",
age: 11,
hobby : [],
reason : ""
)
</script>
</html>效果截图如下所示：
分析上面的效果可知，会将input输入框的value绑定到变量username上、将单选按钮选择的性别值绑定到sex变量、将选择的年龄数值绑定到age变量上、将输入的原因多文本信息绑定到reason变量上 。。。
与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。
- lazy：在change事件中同步数据信息
- number：将数据转换为Number
- trim：过滤数据左右两边的空格
以上是关于Vue学习系列 -- v-model指令与表单元素学习的主要内容，如果未能解决你的问题，请参考以下文章