v-model中的修饰符主要有三个:.lazy、.number、.trim
.lazy
.lazy修饰符在input框失去焦点时进行数据同步。v-model是在input事件下对输入框的值与数据进行同步,即只要输入框中输入的值发生变化就同步数据,但如果加上lazy修饰符后(v-model.lazy)就会变成在每次输入框失去焦点后再同步数据。
<div>
<h3>lazy修饰符</h3>
<!-- 1、lazy:当input失去焦点时数据进行绑定 -->
<input type="text" v-model.lazy="name"> <br>
{{ name }}
</div>
.number
.number修饰符自动将用户输入的值转为数值类型。由于凡是从input输入的值均为字符串类型,但实际应用场景中需要向服务器提交的数据类型为number数值类型,这时就要对input中输入的值进行转换,而v-model.number可以将input输入的值转成number类型。
<div>
<h3>number修饰符</h3>
<!-- 2、number:限定input输入框中输入的内容为number类型,因为默认凡是input输入的内容都是字符串类型 -->
<input type="number" v-model.number="age"> <br>
{{ age }} - {{ typeof age }}
</div>
.trim
.trim修饰符可以自动过滤用户输入的首尾空白字符。
<div>
<h3>trim修饰符</h3>
<!-- 3、trim:可以去除所输内容两边的空格 -->
<input type="text" v-model.trim="hobby"> <br>
{{ hobby }}
</div>
完整代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>v-model修饰符</title>
</head>
<body>
<div id="app" style="height:1000px;">
<div>
<h3>lazy修饰符</h3>
<!-- 1、lazy:当input失去焦点时数据进行绑定 -->
<input type="text" v-model.lazy="name"> <br>
{{ name }}
</div>
<div>
<h3>number修饰符</h3>
<!-- 2、number:限定input输入框中输入的内容为number类型,因为默认凡是input输入的内容都是字符串类型 -->
<input type="number" v-model.number="age"> <br>
{{ age }} - {{ typeof age }}
</div>
<div>
<h3>trim修饰符</h3>
<!-- 3、trim:可以去除所输内容两边的空格 -->
<input type="text" v-model.trim="hobby"> <br>
{{ hobby }}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
name:'abc',
age:10,
hobby:'shopping'
}
})
</script>
</body>
</html>
效果动图如下: