<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. Expression Blend实例中文教程(1) - 开篇

    随着计算机软件开发分工细节化,微软对已有的产品线进行了调整,在保持原有经典开发工具Visual Studio基础上,又推出了一套新的设计开发工具系列,Expression Studio. Expres ...

  2. T_SQL 语句想已有数据表添加约束

    如果向存在数据的表里添加约束,有可能会出现数据不符合检查约束而造成添加约束失败. 如: USE DEmo--指向当前操作的数据库 GO ALTER TABLE Employee ADD CONSTRA ...

  3. C#基础:传入URL,获得Http Post

    #region 传入url,获得Http Post public string HttpGet(string url) { string result = string.Empty; try { va ...

  4. Spring_Spring与IoC_基于注解的DI

    一.基本注解的使用 (1)导入AOP的Jar包 (2) 与set()无关 二.组件扫描器的base-package 三.@Component相关注解 四.@Scope 五.域属性的注入 (1)byTy ...

  5. HDU-3790 最短路最小花费

    判断路径相等时的情况 #include <iostream> #include <cstring> #include <algorithm> #include &l ...

  6. python 需求文件requirements.txt的创建及使用

    在虚拟环境中使用pip生成: (venv) $ pip freeze >requirements.txt 当需要创建这个虚拟环境的完全副本,可以创建一个新的虚拟环境,并在其上运行以下命令: (v ...

  7. Mybatis执行sql(insert、update、delete)返回值问题

    数据库:Mysql 在使用mybatis的过程中对执行sql的返回值产生疑问,顺手记录一下. 结论: insert:   插入n条记录,返回影响行数n.(n>=1,n为0时实际为插入失败) up ...

  8. dotnet watch+vs code提升asp.net core开发效率

    在园子中,已经又前辈介绍过dotnet watch的用法,但是是基于asp.net core 1.0的较老版本来讲解的,在asp.net core 2.0的今天,部分用法已经不太一样,所以就再写一篇文 ...

  9. maven学习(七)后续扩展、资料

    写这几篇博客的来源是 "maven实战 + 网上的博客 + 平时使用的心得 ".记录的都是比较常用的东西,也有一些只做了大概了解.或者干脆直接略过,在这里做一下总结,如果有需要在进 ...

  10. 关于WEB-INF目录下无法访问webapp下的css等静态文件

    第一种方法: <!-- 输出为项目根目录,即webapp--> <c:set value="${pageContext.request.contextPath}" ...