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 查看端口
- 下一篇： Centos7常用命令[系统的关机、重启