Vue v-model trim修饰符

Vue v-model trim教程

Vue v-model trim 修饰符可以实现自动过滤掉输入框的首尾空格。

案例

Vue v-model trim修饰符

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

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

26 vue vmodel trim.png

我们看到，此时我们没有在输入框输入任何内容，输入框的值是 Vue 实例中的默认值，此时及时我们使用了 Vue v-model trim 修饰符，但元素值仍然是带空格的。

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

27 vue vmodel trim.png

我们发现，我们改变了输入框的值以后，没有使用 Vue v-model trim 修饰符的输入框的值还是包含了首尾的空格。但使用 Vue v-model trim 修饰符的输入框的类值的首尾的空格已经没有了。

Vue v-model trim修饰符总结

Vue v-model trim 修饰符可以实现自动过滤掉输入框的首尾空格。