vue v-modle修饰符.number .trim

最新推荐文章于 2023-10-21 15:05:15 发布

weixin_30369041

最新推荐文章于 2023-10-21 15:05:15 发布

阅读量154

点赞数

原文链接：http://www.cnblogs.com/1032473245jing/p/9112081.html

版权

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Vue</title>    
 6     </head>
 7     <body>    
 8         <div id="app">
 9             <input type="number" v-model="message" />
10             <p>{{ typeof message }}</p>
11             <input type="number" v-model.number="messageNumber" />
12             <p>{{ typeof messageNumber }}</p>    
13             <input type="text" v-model.trim="messageTrim" />
14             <p>{{ messageTrim }}</p>
15         </div>
16         <!-- 开发环境版本，包含了用帮助的命令行警告 -->
17         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
18         <script type="text/javascript">        
19             var app=new Vue({
20                 el:'#app',
21                 data:{
22                     message: 123,
23                     messageNumber: 123,
24                     messageTrim:''
25                 }               
26             })
27             
28         </script>
29     </body>
30 </html>

转载于:https://www.cnblogs.com/1032473245jing/p/9112081.html

weixin_30369041

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue v-modle修饰符.number .trim

语法糖：在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。.number：可以将输入转换成Number类型，否则虽然输入的是数字，但它的类型其实是String。.trim：自动过滤输入的首尾空格。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <...
复制链接

扫一扫