vue v-modle修饰符.number .trim

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

.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

vue v-modle修饰符.number .trim相关推荐

vue基础v-moder修饰符( number, trim, lazy )
v-moder修饰符一. v-model修饰符语法法: v-model.修饰符="变量" 二.这里只列举v-model修饰符在表单中的作用 number修饰符: 把数据转换为数字 ...
Vue.js--表单修饰符（.lazy、.number、.trim）详解
.lazy 在输入框中,v-model默认是在input事件中同步输入框的数据(除了输入法中文输入的情况),使用修饰符 .lazy 会转变为 change 事件中同步(类似懒加载): <div ...
vue的lazy修饰符和number修饰符、表单结构
目录 vue的lazy修饰符 vue的number修饰符表单的构成表单域表单控件 vue的lazy修饰符在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ...
[vue] vue常用的修饰符有哪些？列举并说明
[vue] vue常用的修饰符有哪些?列举并说明 .trim .number .stop .prevent 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...
Vue 32个修饰符，你不一定全知道！
点击上方前端开发博客,关注公众号回复加群,加入前端群前言 vue简洁好用体现在很多个地方,比如其内置了32+修饰符,可以很方便我们阻止冒泡.阻止默认事件.鼠标事件处理.系统键盘事件等等,让我们可 ...
Vue 自定义按键修饰符对应表
Vue 自定义按键修饰符对应表按键键码 8 BackSpace 9 Tab 12 Clear 13 Enter 16 Shift 17 Ctrl 18 Alt 19 Pause 20 Caps_L ...
vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符有时我们需要父组件向子组件传值,并且子组件要修改父组件中的值是,我们一般会这样写 //父组件 <template>//子组件修改值父组件注册自定义事件传过来的参数通过 ...
22. Vue keycodes按键修饰符
需求在业务开发中,例如:用户登录添加用户名和密码之后,按下回车键完成登录,这个操作就需要绑定按键的keyup事件,并且还要使用按键修饰符来指定按下的键盘按钮. 下面来看看另一个需求来逐步认识一下按钮 ...
五、伊森商城前端基础-Vue v-on 事件修饰符按键修饰符 v-for v-if 和v-show v-else和v-else-if p24
目录 1.v-on 2.事件修饰符 3.按键修饰符 3.1.组合按钮 4.v-for 5.v-if和v-show 6.v-else 和 v-else-if 6.1.v-if结合v-for来时用 1.v ...

vue v-modle修饰符.number .trim

vue v-modle修饰符.number .trim相关推荐

最新文章

热门文章