vue中表单修饰符

<!DOCTYPE HTML>
<html lang= 'en'>
	<head>
		<meta charset = 'UTF-8'/>
	</head>
	<body>
		<div id = 'box'>
			<!--.lazy使v-model变懒,鼠标失去焦点才提交数据-->
			<input type = 'text' v-model.lazy = 'title'/>
			{{title}}
			<input type = 'text' v-model.number = 'mynumber'/>
			{{mynumber}}
			<!--.trim去掉首尾空格-->
			<input type = 'text' v-model.trim = 'mytrim'/>
			|{{mytrim}}|
		</div>
		<script src = 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
		<script>
			var vm = new Vue({
				el:'#box',
				data:{
					title:'',
					mynumber:0,
					mytrim:'',
				},
			});
		</script>
	</body>
</html>

1、v-model.lazy

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件_之后_进行同步,鼠标失去焦点才同步数据

2、v-model.number

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符,无论文本框中输入的是字符串,还是数字,打印出来的类型都是string 当用了number修饰符后,如果输入数字,会转换成数值型然后再赋给value,如果输入的不是数字,就不会赋值

3、v-model.trim

清除首尾空格

原文地址:https://www.cnblogs.com/qingheshiguang/p/14745000.html