Vue.js 修饰符
2019-08-09 本文已影响0人
Rinaloving
与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机
.lazy：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>修饰符</title>
</head>
<body>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<!--.lazy 在输入框中，v-model默认是在input事件中同步输入框的数据（除了提示中
介绍的中文输入法情况外），使用修饰符 .lazy 会转变为在 change事件中同步，示例-->
<div id="app">
<input type="text" v-model.lazy="message">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>
</body>
</html>
这时 message 并不是实时变化的，而是在失去焦点和按回车键才更新
lazy.png
.number：
<!--.number: 使用修饰符.number 可以将输入转换为Number类型，否则虽然输入
的是数字，但它的类型其实是String，比如在数字输入框时会比较有用，示例-->
<div id="app2">
<input type="number" v-model.number="message">
<p>{{ typeof message }}</p>
</div>
<script>
var app = new Vue({
el:'#app2',
data:{
message:123
}
})
</script>
number.png
.trim：
<!--.trim 修饰符 .trim 可以自动过滤输入的首尾空格，示例-->
<div id="app3">
<input type="text" v-model.trim="message">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el:'#app3',
data:{
message:''
}
})
</script>
trim.png
