如何在vue中格式v-model的值

最新推荐文章于 2024-08-26 08:59:48 发布
最新推荐文章于 2024-08-26 08:59:48 发布
阅读量5.2k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5ad5abdb5188257ddb101e84
版权

在项目中，经常会遇到需要对用户输入的值进行处理并渲染到input上面的情况，但是如果用watch将会报错

You may have an infinite update loop in watcher

因此，在这里提供一个思路，熟悉vue的大腿肯定知道v-model是v-bing和v-on的语法糖

例如

<input js-input='2' placeholder="格式：MM/YY 例:09/18" class="input-shadow" v-model="time"></div>

我们需要在用户输入的数值里面自动插入一个斜杠'/'，你会怎么做？

<input js-input='2' placeholder="格式：MM/YY 例:09/18" class="input-shadow" :value="cardTime" @input="formDate"></div>

这是我的做法

weixin_34304013
关注
VUE指令-数据绑定v-model
12-27 1276
用 v-model 指令在表单  及  元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 Java
【Vue】终结v-model
思索的涟漪，突破自我
10-19 568
vimodel.只有没有传值的参数才会使用默认值，如果调用hello时没有传入参数,或者传入了undefined,x会自动获取默认值'default value'我们一输入数字在输入框中默认就变成字符串数字了，v-model.number就是vue默认给我们进行转换，输入的是纯数字~过滤器可以对绑定的数据进行格式化后再展示,它本质上是一个可以接收数据、进行处理并返回结果的函数我们可以在插值表达式或。这里我们在格式化日期的过滤器函数中,利用ES6的默认参数为format设置了一个默认值'YYYY-MM-DD'
Vue使用v-model收集各种表单数据、过滤器
最新发布
Bulut0907
08-26 945
不是必须要用的，用计算属性、method方法也可以实现。不传时间戳，默认就是当前时间。
vue3 v-model方式修改父组件内部得值，自定义修饰符
weixin_45932463的博客
04-06 2435
vue中数据数据流向 vue中数据流向是单向的，也就是说我们不能直接修改props中的值所以我们都会 <template> <div> <Renderer :data='data' @updateValue='updateValue'/> </div> </template> <script setup> 我这里使用unplugin-auto-import所以不必导入ref import Re
Vue表单修饰符：v-model.lazy、v-model.number、v-model.trim
m0_67841039的博客
07-27 715
Vue表单修饰符：v-model.lazy、v-model.number、v-model.trim
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
10-17
主要介绍了vue.js使用v-model实现表单元素(input) 双向数据绑定功能,结合完整实例形式分析了v-model实现表单input元素数据双向绑定相关操作技巧,需要的朋友可以参考下
Vue自定义组件中使用v-model
weixin_45938045的博客
05-20 251
Vue自定义组件中使用v-model什么是v-modelv-model的使用举例v-model自定义组件中的使用新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 什么是v-model 你可以用 v-model 指令在表单 &
vue3实现v-model原理详解
10-16
然而，为了说明原理，我们还需要回顾Vue 2.x中v-model的实现方式，而这些方式在Vue 3中可以通过Proxy和一些额外的逻辑来模拟实现。 在实现v-model的过程中，需要对目标对象进行深层次的代理监听。我们知道Proxy只能...
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
在Vue.js中，过滤器（Filters）是Vue实例的一个非常有用的特性，它允许用户对从插值表达式和v-bind表达式中输出的文本进行格式化。Vue2允许自定义过滤器，这些过滤器可以被添加到JavaScript表达式的尾部，并由“管道...
vue自定v-model实现表单数据双向绑定问题
10-18
在Vue中，`v-model`指令被广泛用于实现这一功能，特别是在处理表单输入时。它简化了开发者在视图层和数据模型之间的交互，使得数据的更新能够即时反映到用户界面上。 在传统的`v-model`使用中，我们通常直接在表单...
vue中input的v-model清空操作
10-16
在Vue.js框架中，`v-model`是一个非常重要的特性，它实现了数据的双向绑定，使得视图和模型之间保持同步。然而，在某些场景下，比如需要在输入框中添加一个清空按钮，直接操作`v-model`绑定的值可能会遇到一些问题。...
vue 中格式化时间 过滤器格式化时间
Bin，的博客
06-24 987
vue 中格式化时间 过滤器格式化时间 data.js 格式化方法使用 * // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 // (ne
学习vue的第5天，v-for，v-model的原理以及用法等
qq_34176561的博客
05-26 459
购物车，循环遍历，v-for的 购物车价格的小数点 方法是vue自带的过滤器，filters 管道符号 | vue允许自定义过滤器， filters：{ showPrice(传价格){ let pricestr = price.toFixed(2) return `￥${pricestr}` } } 可以进行文本格式化 v-for 原理 <li v-for="item in name"></li> <li v-
vue 如何在循环中 "监听" 的绑定v-model数据
weixin_30249203的博客
09-10 452
vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. 监听对象的变化 3. 监听对象中具体属性值的变化 4. vue 如何在循环中 "监听" 的绑定v-model数据 回到顶部 1.普通属性的值进行监听 vue中提供了一个wat...
vue之v-model基本使用
兮动人
02-14 682
v-model：获取和设置表单元素的值（双向绑定） <body> <div id="app"> <input type="text" v-model="message" @keyup> <h2>{{ message }}</h2> </div> <script src="../js/vue.js"></script> <script&gt
Vuejs004---v-model 指令实现双向数据绑定
rngigskt的博客
08-24 577
目录 一：使用 v-model 指令实现双向数据绑定 1. v-bind 2.双向数据绑定v-model 一：使用 v-model 指令实现双向数据绑定 1. v-bind 我们可以对 v-bind 的绑定数据的形式得出一个结论，v-bind 只能 实现数据的单向绑定， 从模型（M）绑定到视图（V），使用 VM 将数 据去渲染视图，但是我们无法通过该形式实现数据的双向绑定。 2.双向数据绑定v-model 在实际项目开发中，不仅仅只是将模型准确的渲染到视图中...
很乱，临时保存，自定义v-model
weixin_30517001的博客
02-10 108
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <titl...
vue语法（model层）vue的配置项
weixin_59023663的博客
08-07 697
样式操作 操作样式，就是属性绑定，只不过绑定的属性是class和style，vue在class和style属性上做了加强，给样式属性赋的值还可以是对象，数组。 绑定姿势（格式） <div v-bind:class="数据|属性|变量|表达式"></div> <div v-bind:style="数据|属性|变量|表达式"></div> 属性值的类型支持 字符串/对象 / 数组 <div :class="{active:true,t1:false
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值