<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通过watch对input做字数限定的更多相关文章

  1. Vue.js 入门:从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  2. html中如何修改选中 用input做的搜索框 的边框颜色

    html中如何修改选中 用input做的搜索框 的边框颜色 如图,当我鼠标选中输入框时,内边框会变成蓝色 我的问题是: 1.如何把蓝色去掉? 2.如何改成别的颜色? 首先感谢 UI设计师提出的需求,解 ...

  3. vue+vue-cli+淘宝lib-flexible做移动端自适应

    总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价ma ...

  4. input上传限定文件类型

    input上传限定文件类型 accept="image/*"   限定为只能上传图片 accept=”audio/*   限定为只能上传音频 accept=”video/*” 限定 ...

  5. 使用google API之前需要對input 做什麼 安全性的處理?

    我正要使用node.js 和 google map api做一个小应用,Google MAP API的使用URL如下: https://maps.googleapis.com/maps/api/pla ...

  6. Vue 修改成功之后我做了什么

    Vue 修改成功之后我做了什么 背景:前端将修改的数据传递到后端,后端返回成功之后,我们要将数据及时显示出来. 霸道方法一:重新请求接口 柔和方法二:修改成功之后的数据传递到源数据中,进行双向绑定显示 ...

  7. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  8. vue中多个input绑定enter按键事件

    默认再每个input上加 keyup.enter 是可以绑定事件的 可是多个input一起绑定同一个事件就比较麻烦 所以就在vue dom里面遍历查找并绑定事件 let handleEnter = ( ...

  9. vue动态(type可变)input绑定

    遇到如下错误: v-model does not support dynamic input types 解决方法: vue 2.5.0以上,支持动态绑定 <input :type=" ...

随机推荐

  1. [转载]ZendStudio格式化html错位问题修正

    原文链接leeon.me ZendStudio提供的HTML编辑功能感觉很强大,有时候觉得比dw更加人性化,而且整合php在一个编辑器上编写前端会方便很多,以前每次通过zend格式化html代码都会奇 ...

  2. golang学习之rpc实例

    rpc(远程过程调用),可以像调用本地程序一样调用远端服务,rpc分为http方式和tcp连接方式,使用http的rpc调用如下: 首先是server端: // rpc_server project ...

  3. Vue指令(二)--数组的变动

    1.数组更新数据,引起视图更新 数据驱动:数据发生变化,引起视图的变化 Vue在检测数组变化的时候,并不是直接重新渲染整个列表,而是最大化的复用Dom元素. 替换的数组中,含有相同元素的项是不会被重新 ...

  4. Oracle PL/SQL Developer 上传下载Excel

    接到需求,Oracle数据库对Excel数据进行上传和下载,百度后没有很全的方案,整理搜到的资料,以备不时之需. 一.下载Oracle数据到Excel中. 下载数据到Excel在MSSql中很简单,直 ...

  5. Spring学习笔记:声明式事务管理增删改查业务

    一.关于是事务 以方法为单位,进行事务控制:抛出异常,事务回滚. 最小的执行单位为方法.决定执行成败是通过是否抛出异常来判断的,抛出异常即执行失败 二.声明式事务: 声明式事务(declarative ...

  6. AndroidVideoCache 框架源码分析

    1.简析: 在客户端播放视频的使用,容易出现这样的一个问题.在网络状况不好的情况下,视频流很容易卡顿或者中断,即使播放软件本身有一点的缓存能力,但是这个往往不够,造成播放失败,卡顿. AndroidV ...

  7. Hql语句转化为sql语句中文乱码问题

    刚刚学习Hql语句就出现这一的问题,百度半天终于解决了,总结一下解决的方案: 出现中文乱码最可能的原因是hibernate配置文件配置的问题 1.检查url路径是否指定字符集为UTF-8 <pr ...

  8. 为什么分布式一定要有redis?(转)

    为什么分布式一定要有redis? 程序员小灰 6天前 点击上方“程序员小灰”,选择“置顶公众号” 有趣有内涵的文章第一时间送达! 作者:孤独烟 来自:http://rjzheng.cnblogs.co ...

  9. 子div设置float后会导致父div无法自动撑开

    本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:l ...

  10. linux多线程编程——读者优先、写者优先问题

    读者优先描述 如果读者来: 1) 无读者.写着,新读者可以读: 2) 无写者等待,但有其他读者正在读,新读者可以读: 3) 有写者等待,但有其他读者正在读,新读者可以读: 4) 有写者写,新读者等 如 ...