vue指令-v-model修饰符

1、目标

让v-modelv-mode拥有更强大的功能

2、语法

v-model.修饰符=“Vue数据变量”
.number 以parseFloat转成数字类型
.trime 去除首位空白字符
.lazy 在change时触发而非input时

示例1

<template><div id="app"><div><span>年龄:</span><input type="number" v-model.number="age"></div></div></template><script>export default {data(){return{age:0}},}
</script>

示例2

<template><div id="app"><div><!--.trim去除首尾空格--><span>人生格言:</span><input type="text" v-model.trim="motto"></div></div></template><script>export default {data(){return{motto:""}},}
</script>

示例3

<template><div id="app"><div><!--.lazy失去焦点同步数据--><span>个人简介:</span><textarea v-model.lazy="intro"></textarea></div></div></template><script>export default {data(){return{intro:""}},}
</script>