1、lazy
v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步,也就是在失去焦點或者按下回車鍵時才更新

<template><div><p>.lazy修飾符</p><input type="text" v-model.lazy="val"><p>{{ val }}</p></div> </template> <script>export default {data(){return{val:''}}} </script>

2、number
.number 修飾符可以將 輸入的值轉化為Number類型 ，否則雖然你輸入的是數字,但它的類型其實是String，在數字輸入框中比較有用

<template><div><p>.number修飾符</p><input type="number" v-model.number="val"><p>我的數據類型是：{{ typeof(val) }}</p></div> </template><script>export default {data(){return{val:''}}} </script>

3、trim
.trim 修飾符會自動過濾掉輸入的首尾空格

<template><div><p>.trim修飾符</p><input type="text" v-model.trim="val"><p>val的長度是：{{ val.length }}</p></div> </template><script>export default {data(){return{val:''}}} </script> <div id="app"><input type="text" v-model.trim="name" name="" id="" value="" /><span>{{ name }}</span></div>var app = new Vue({el: '#app',data: {name:''}})

總結

以上是生活随笔為你收集整理的修饰符.lazy .number .trim的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。