vue 修饰符

vue 中的表单修饰符有：number、trim、lazy

• number 将输入框内的字符转为数字
• trim 将输入框内中前后的空格去掉
• lazy 将输入框的值与数据转变在 change 事件中同步

number 修饰符

vue 中 number 修饰符的作用是将输入框内的字符串转换成数字

<input v-model.number="number"> <p @click="showMsg">{{ number }}</p> <script> methods: { 	showMsg: function() { 		console.log(this.number) 		console.log(typeof(this.number)) 	} } </script> 

trim 修饰符

vue 中 trim 修饰符的作用是将输入框内中前后的空格去掉

<input v-model.trim="search_text"> <p v-on:click="showContent"> {{ search_text }}</p> <script> showContent: function() { 	console.log( "a" + this.search_text) } </script> 

lazy 修饰符

在 change 而非 input 时更新

<input v-model.lazy = 'msg'> <span> {{msg}} </span> <script> 	new Vue({ 		el:'#app', 		data:{ 			msg:'lazy' 		} 	}) </script> 

.stop：等同于 js 中的 event.stopPropagation()，防止事件冒泡，阻止事件传播
.prevent：等同于js中的 event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播），阻止事件（超链接）默认行为
.capture：与事件冒泡的方向相反，事件捕获
.self：只会触发自己范围内的事件，不包含子元素（事件目标对象是自己，才会触发）
.once：只会触发一次