<body>
<div id="app">
<!-- 修饰符 .lazy 回车或者失去光标的时候 h2标签里面的 message才会同步 -->
<input type="text" v-model.lazy="message"> 请输入内容
<h2> {{ message }} </h2>
<!-- 修饰符 .number 可以让输入框的内容自动转成数字类型
默认情况下 输入框中 无论输入字母 还是数字 都会被当成 字符串进行处理 -->
<input type="number" v-model.number="age"> 请输入数字
<p> 年龄：{{ age }} 类型：{{ typeof age}} </p>
<!-- 修饰符 .trim 可以过滤内容左右两边的空格-->
<input type="text" v-model.trim="text">
<h5> {{ text }} </h5>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "",
num: '',
text: ""
}
})
</script>
</body>