vue通过watch对input做字数限定的方法
之前写了关于vue通过watch对input做字数限定的方法,最近需要回顾,就顺便发到随笔上了
<div id="app"> <input type="text" v-model="items.text" ref="count"/> <div v-html="number"></div> /div>
new Vue({ el: '#app', data: { number: '100', items: { text:'', }, }, watch:{ //watch()监听某个值(双向绑定)的变化,从而达到change事件监听的效果 items:{ handler:function(){ var _this = this; var _sum = 100; //字体限制为100个 _this.$refs.count.setAttribute("maxlength",_sum); _this.number= _sum- _this.$refs.count.value.length; }, deep:true } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
详解.vue文件中监听input输入事件(oninput)
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput. oninput 事件在用户输入时触发,菜鸟教程中的用法是: 但是在.vue中这样写是没有作用的: <input type="text" id="cardsNum2" value="1" @oninput =&quo
-
Vue中封装input组件的实例详解
Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目中的UI图是这样的 代码如下 子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>
-
vue.js 1.x与2.0中js实时监听input值的变化
一.vuejs 2.0中js实时监听input 在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用.这意味着 v-el:my-element 将写成这样: ref="myElement" , v-ref:my-component 变成了这样: ref="myComponent" .绑定在一般元素上时,ref 指DOM元素,绑定在组件上时,ref 为一组件实例. 因为 v-ref 不再是一个指令
-
vue2.0结合Element实现select动态控制input禁用实例
今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得为什么不直接把input设置成禁用的而要用动态的,选一次select禁用一次input,也就是说,input只有在select是没有点击过的时候是可编辑的,但凡我改变一次select的值,input就要被设置成禁用,其实没有必要,因为第一次设置成禁用后面已经不能再改变input的值了,不过当时小颖也
-
vue获取input输入值的问题解决办法
vue获取input输入值的问题解决办法 v-for里有多行input输入框,vue怎么获取某行的输入的值,随便写了点代码,意思就是后台返回了多行的list集合,页面显示多行输入框,当修改某行的值时进行校验,输入错误友好提示下,后边加个清空按钮,点击清空当前行数据,最开始的想法是,用v-bind:value绑定值,这样就出现一种情况,页面输入的值无法获取到,v-bind不会修改原始list里的值,而且ref也不能动态绑定,ref只能全部获取,this.$refs.itemPriceRef[],这
-
vue.js中v-on:textInput无法执行事件问题的解决过程
前言 最近在学习vue.js框架,学习过程中遇到一些问题,所以记下其中遇到问题的解决过程,避免以后再遇到同样的问题,分享出来也方便遇到这个问题的朋友参考,下面话不多说了,来一起看看详细的介绍: 先来看这段示例代码 <div id="wrap"> <input type="text" v-on:textInput="fn"> </div> <script type="text/javascript
-
Vue input控件通过value绑定动态属性及修饰符的方法
对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值): <!-- 当选中时,`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="check
-
Vue通过input筛选数据
本文实例为大家分享了Vue通过input筛选数据的具体代码,供大家参考,具体内容如下 <div id="app"> <input v-model='search' /> <ul> <li v-for="item in items"> <label>价格</label><span v-html="item.name"></span> <label&
-
vue通过watch对input做字数限定的方法
之前写了关于vue通过watch对input做字数限定的方法,最近需要回顾,就顺便发到随笔上了 <div id="app"> <input type="text" v-model="items.text" ref="count"/> <div v-html="number"></div> /div> new Vue({ el: '#app', data:
-
Vue项目中使用flow做类型检测的方法
在vue2.0的项目中加入flow类型检查.当前项目是用js写的,当项目越来越大,由于js弱类型的特性,相比ts(typescript)这种强类型的语言而言,后期维护会越来越困难.为了解决这个问题,决定使用flow 加入类型检查. flow了解 flow是fackbook公布的javascript静态类型检查器. 可以检查js中一些bug,eg:自动类型转换中出现的问题.flow官网 首先,安装flow npm i flow-bin --save-dev 然后在package.json中添加脚本
-
vue监听input标签的value值方法
由于项目需要做实时搜查询数据,所以需要监听input标签的value,这里使用的前端框架vue <input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/> 这里的重点是:@input="search($event)",表示当文本框有内容输入时,则调用search方法 /*模糊搜索*/
-
vue项目element UI input框扫码枪扫描过快出现数据丢失问题及解决方案
目录 项目需求: 解决方案探索 错误代码: 问题就出在 解决方法 完整代码 如下 项目需求: 输入框要掉两个接口,根据第一个验证接口返回的code,弹不同的框,点击弹框确认再掉第二个接口 根据客户现场反应,扫描枪快速扫描会出现 料号前几位字符丢失 不完整的问题.于是开始了测试之路. 解决方案探索 1.首先考虑 ,可能是因为扫描过快,服务端接口还没返回过来,输入框就已经清空了值 导致条码有丢失字符的现象,所以我这边做了一个缓存,将输入框的值存到一个数组中去,定时上传到接口. [x]2.考虑到可能是
-
vue.js给动态绑定的radio列表做批量编辑的方法
每个题目绑定的题目结构如下json对象,每次动态添加选项就是将其加入了vue实例的某个数组对象中: vm.options.push({ id: "", text: "新选项", checked: false }); 现在对radio或者checkbox集合列表进行批量添加,这里使用到了textarea容器. textare每一行都是一条数据,它的内部是根据回车来区分(break-word自动换行不算),每一行是一个对象,整体就是一个文本数组了,获取如下: var c
-
解决vue中监听input只能输入数字及英文或者其他情况的问题
如下所示: 1. <input placeholder="请输入条形码" class="disPriceStyle" v-model = 'searcBarCode'></input>. (只能输入数字,英文) <input placeholder="请输入商品条形码" class="disPriceStyle" maxlength="20" v-model = 'search
-
Vue 处理表单input单行文本框的实例代码
用vue监听单行文本框是最最最容易的事. 只需用到 v-model 就能监听. <template> <div id="app"> <input type="text" v-model="msg"> <p>{{msg}}</p> </div> </template> <script> export default { name: 'app', data
-
Vue v-for中的 input 或 select的值发生改变时触发事件操作
oninput 用法 <input type="text" id="myInput" oninput="myFunction()"> <script> function myFunction() { } </script> oninput 如果需要在Vue中使用则需要写成 v-on:input 还有绑定id的时候这样写:id="'m_num'+index" 注意m_num必须用单引号引起来
-
vue登录页面设置验证码input框的方法
本文实例为大家分享了vue登录页面设置验证码input框的具体代码,供大家参考,具体内容如下 1.效果 2.代码 第一步:建立子组件(举例,文件名可自己取)----代码如下 子组件 SIdentify 的完整代码: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="cont
-
Vue使用antd中input组件去验证输入框输入内容(rules 案例)
目录 效果图 示例代码 效果图 示例代码 <a-form-model-item prop="phone"> <a-input v-model="form.phone" :maxLength="11" placeholder="手机号" /> </a-form-model-item> <a-form-model-item prop="code"> <a-i
随机推荐
- 打造博客园(cnblogs)超级自定义界面
- DB2常用傻瓜问题1000问(六)
- 备份硬盘主引导分区到一个文件中
- Java使用JavaMail发送邮件的方法
- java递归法求字符串逆序
- ASP.NET窗体身份验证详解
- 简单介绍PHP非阻塞模式
- python通过urllib2获取带有中文参数url内容的方法
- asp 网站静态化函数代码html
- js当一个变量为函数时 应该注意的一点细节小结
- NodeJS配置HTTPS服务实例分享
- 用PHP 快速生成 Flash 动画的方法
- PowerShell小技巧之启动远程桌面连接
- 解析php二分法查找数组是否包含某一元素
- jquery+css实现绚丽的横向二级下拉菜单-附源码下载
- script标签的 charset 属性使用说明
- 如何防止回车(enter)键提交表单
- 利用麦咖啡(McAfee)打造超安全的Web站点目录
- Android编程实现拍照功能的2种方法分析
- python正则表达式修复网站文章字体不统一的解决方法