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通过watch对input做字数限定的更多相关文章
- Vue.js 入门:从零开始做一个极简 To-Do 应用
Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言 学习 Vue ...
- html中如何修改选中 用input做的搜索框 的边框颜色
html中如何修改选中 用input做的搜索框 的边框颜色 如图,当我鼠标选中输入框时,内边框会变成蓝色 我的问题是: 1.如何把蓝色去掉? 2.如何改成别的颜色? 首先感谢 UI设计师提出的需求,解 ...
- vue+vue-cli+淘宝lib-flexible做移动端自适应
总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价ma ...
- input上传限定文件类型
input上传限定文件类型 accept="image/*" 限定为只能上传图片 accept=”audio/* 限定为只能上传音频 accept=”video/*” 限定 ...
- 使用google API之前需要對input 做什麼 安全性的處理?
我正要使用node.js 和 google map api做一个小应用,Google MAP API的使用URL如下: https://maps.googleapis.com/maps/api/pla ...
- Vue 修改成功之后我做了什么
Vue 修改成功之后我做了什么 背景:前端将修改的数据传递到后端,后端返回成功之后,我们要将数据及时显示出来. 霸道方法一:重新请求接口 柔和方法二:修改成功之后的数据传递到源数据中,进行双向绑定显示 ...
- vue.js中,input和textarea上的v-model指令到底做了什么?
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- vue中多个input绑定enter按键事件
默认再每个input上加 keyup.enter 是可以绑定事件的 可是多个input一起绑定同一个事件就比较麻烦 所以就在vue dom里面遍历查找并绑定事件 let handleEnter = ( ...
- vue动态(type可变)input绑定
遇到如下错误: v-model does not support dynamic input types 解决方法: vue 2.5.0以上,支持动态绑定 <input :type=" ...
随机推荐
- RUP 4+1视图
RUP开篇之作:http://www.ibm.com/developerworks/cn/rational/r-4p1-view/index.html 百科:http://baike.baidu.co ...
- ASP.NET MVC4 新手入门教程之三 ---3.添加视图
在这一节你要修改HelloWorldController类要使用的视图模板文件来干净封装生成 HTML 响应到客户端的过程. 您将创建一个使用Razor 视图引擎介绍 ASP.NET MVC 3 的视 ...
- Java - 谨慎覆盖clone
覆盖clone时需要实现Cloneable接口,Cloneable并没有定义任何方法. 那Cloneable的意义是什么? 如果一个类实现了Clonable,Object的clone方法就可以返回该对 ...
- git 命令记录贴
记录下最近使用git的场景. 问题 1:将一个完整的项目发布到已创建好的git地址(码云) 执行步奏: 1.配置自己的公钥 2.检查是否连接成功 $ ssh -T git@git.oschina.ne ...
- Hibernate 学习(三)
一.关系映射 实体类之间的关联映射以及表之间的关系是 ORM 的灵魂之处.对象间的关系的子集可以用下列四种方式解释.关联映射可以是单向的也可以是双向的. 映射类型 描述 Many-to-One 使用 ...
- Grid标签计算结果集中的合计行
方法一: var detailT= grid.gettable("11"); var r=detailT.rows.length; detailT.rows[r-1].cells[ ...
- HDU 3191 次短路长度和条数
http://www.cnblogs.com/wally/archive/2013/04/16/3024490.html http://blog.csdn.net/me4546/article/det ...
- PAT 1044. Shopping in Mars
#include <cstdio> #include <cstdlib> #include <vector> #include <climits> #i ...
- window onload || jquery $()
1.window 的 onload 机制只指定一个函数,且在页面DOM及静态资源加载完之后执行: window.onload = function(){ alert(); } 2.$(document ...
- 鼠标事件-拖拽(不能拖出窗口的div)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...