Vue 表单输入绑定使用和技巧

在Vue中收集表单参数过程中，通常使用v-model指令，v-model的使用做一下简单的介绍

目录

基础用法

1.文本框

2.多行文本

3.复选框

4.多选

5.单选框

修饰符

lazy

number

trim

总结

基础用法

1.文本框

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

 

 

2.多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

 

3.复选框

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

 

4.多选

<div>Checked names: {{ checkedNames }}</div>

<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>

 

5.单选框

<div>Picked: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

 

 

修饰符

v-model上常用的修饰符,可以帮我们对v-model指令上绑定的属性进行一些处理。

lazy

在input标签或者textarea标签上，如果不加lazy修饰符，会在input事件后修改内容。加了lazy修饰符之后，会在input标签或者textarea标签的change事件后改变内容的值。

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

number

把v-model的变量内容自动转为数字

<!--自动转为数字-->
<input v-model.number="age" />

trim

自动去除用户输入内容中两端的空格

<!--自动去除两端的空白字符-->
<input v-model.trim="msg" />

总结

日常开发中，如果能很好的使用v-model中的修饰符，能帮我们减少一些冗余的代码，避免重复造轮子

参考：

表单输入绑定 | Vue.js

欢迎大家私信和留言交流，感谢！