Vue v-model number修饰符

Vue v-model number教程

Vue v-model 指令默认捕获的输入框的内容都是字符串的形式，即使输入框输入的是数字，也是 string 类型。我们可以使用 Vue v-model number 修饰符可以实现让输入框输入的内容，自动转换为 number 类型。

案例

Vue v-model number修饰符

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-model number 修饰符</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="number" style="width:500px" v-model="message">
    	<p>输入值：{{message}}，输入类型：{{typeof message}}</p>
		<input type="number" style="width:500px" v-model.number="message2">
    	<p>输入值：{{message2}}，输入类型：{{typeof message2}}</p>
         <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script>
	var v1 = new Vue({
	    el:"#app",
	    data:{
	        message:520,
	        message2:1314
	    }
	})
</script>
</html>

浏览器运行效果如下图所示：

24 vue vmodel number.png

我们看到，此时我们没有在输入框输入任何内容，输入框的值是 Vue 实例中的默认值，此时显示的数据类型都是 number 类型。

现在，我们改变输入框的值，浏览器运行效果如下图所示：

25 vue vmodel number.png

我们发现，我们改变了输入框的值以后，没有使用 Vue v-model number 修饰符的类型变成了 string 类型。但使用 Vue v-model number 修饰符的输入框的类型还是 number 类型。

Vue v-model number修饰符总结

使用 Vue v-model number 修饰符可以实现让输入框输入的内容，自动转换为 number 类型。