vue基础之v-model的修饰符

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>