037——VUE中表单控件处理之表单修饰符：lazy/number/trim
生活随笔
收集整理的这篇文章主要介绍了
037——VUE中表单控件处理之表单修饰符：lazy/number/trim
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单控件处理之表单修饰符：lazy/number/trim</title><script src="vue.js"></script>
</head>
<body>
<div id="lantian"><!--lazy(懒惰的) ：使用lazy修饰符之后，当文本框失去焦点之后，才会更新同input绑定同样数据的数据。-->lazy修饰符测试：<br><input type="text" v-model.lazy="lazydata"><br>{{lazydata}}<br><!--number:强制使得输入的数据的字符类型变成number型-->number修饰符测试：<br><input type="number" v-model.number="numberData"><br><!--trim:输入的空格，不调用事件方法-->trim修饰符测试：<br><input type="text" v-model.number.trim="trimData"><br>
</div>
<script>var app = new Vue({el: '#lantian',watch:{numberData:function (newData,oldData) {console.log(typeof (newData));//输出：number},trimData:function (newData,oldData) {console.log(newData.length);}},data: {lazydata:'lazy中的默认数据',numberData:"number修饰符测试使用的数据",trimData:"trimData"}});
</script></body>
</html>
转载于:https://www.cnblogs.com/yiweiyihang/p/8191720.html
总结
以上是生活随笔为你收集整理的037——VUE中表单控件处理之表单修饰符：lazy/number/trim的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： netstat -an 查看端口
- 下一篇： YYCache深入学习