vue v-modle修饰符.number .trim

语法糖：在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。

.number：可以将输入转换成Number类型，否则虽然输入的是数字，但它的类型其实是String。

.trim：自动过滤输入的首尾空格。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Vue</title>

     </head>

     <body>

         <div id="app">

             <input type="number" v-model="message" />

             <p>{{ typeof message }}</p>

             <input type="number" v-model.number="messageNumber" />

             <p>{{ typeof messageNumber }}</p>

             <input type="text" v-model.trim="messageTrim" />

             <p>{{ messageTrim }}</p>

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script type="text/javascript">

             var app=new Vue({

                 el:'#app',

                 data:{

                     message: 123,

                     messageNumber: 123,

                     messageTrim:''

                 }

             })

         </script>

     </body>

 </html>

巴特西

vue v-modle修饰符.number .trim

最新文章

热门文章