v-model的三个修饰符:
1…lazy取代 input 监听 change 事件,让input框在失去焦点或者按enter时才会更新数据:
2…number 输入字符串转为有效的数字:
3…trim 过滤掉输入内容的首尾空格:
<div id="app">
<!--v-model修饰符-->
<!--1..lazy取代 input 监听 change 事件,让input框在失去焦点或者按enter时才会更新数据-->
<input type="text" v-model.lazy="msg">
<h2>我输入的是:{{msg}}</h2>
<!--2..number 输入字符串转为有效的数字-->
<input type="number" v-model.number="count">
<h2>我输入的类型是{{typeof count}}</h2>
<!--2..trim 过滤掉输入内容的首尾空格-->
<input type="text" v-model.trim="name">
<h2>我输入的是{{name}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
msg: '欢迎使用Vue.js',
count: '',//传的字符串,双向数据绑定的.number会把字符串转换为有效的数字
name: ''
}
})
</script>