<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. 关于asp.net假分页的删除操作的随笔

    作为一个新人,上周负责优化一个后台管理系统,遇到一个问题:点击删除按钮之后,页面又回到了第一页. 而我需要达到的效果是:点击了删除按钮之后,原来是那一页,删除后还是在那一页. 由于项目是已经验收了的, ...

  2. 关于request请求的基本获取

      1.Request对象的作用是与客户端交互,收集客户端的Form.Cookies.超链接,或者收集服务器端的环境变量. request对象是从客户端向服务器发出请求,包括用户提交的信息以及客户端的 ...

  3. clean code 第一章笔记

    我们都曾有过这样的经历:自己写的烂程序竟然可以运行,然后就认为能运行的烂代码总比什么都没有强.还会有这样的想法:总有一天我会修改它.但是,LeBlanc(勒布朗)法则表示:稍后等于永不(Later e ...

  4. Java内存溢出定位和解决方案(new)

    引起内存溢出的原因有很多种,列举一下常见的有以下几种: 1.内存中加载的数据量过于庞大,如一次从数据库取出过多数据:2.集合类中有对对象的引用,使用完后未清空,使得JVM不能回收:3.代码中存在死循环 ...

  5. Js的核心:找到DOM

    掌握 JavaScript 的核心之一:DOM,能够熟悉DOM相关操作,了解JavaScript事件机制 一.使用getElementById().getElementsByTagName().chi ...

  6. Android fastjson

    Fastjson介绍 Fastjson是一个Java语言编写的JSON处理器. 1.遵循http://json.org标准,为其官方网站收录的参考实现之一. 2.功能qiang打,支持JDK的各种类型 ...

  7. linux 获取当前程序路径

    const std::string strCfgName = "logger_import_db.conf" ;bool fGetCfgFileName(std::string&a ...

  8. HTTP Status 500 - Handler processing failed; nested exception is java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config

    今天在用idea搭建spring mvc时候报了这个错误,缺少jstl的依赖包.由于是使用的spring-core的依赖,而spring-core里面是有jstl的.这就郁闷了,最后是在自己的pom. ...

  9. $.each遍历JSON字符串和 Uncaught TypeError: Cannot use 'in' operator to search for '156错误

    现在页面和后端交互都流行使用json了  自己记录一下解析字符串的方法,要不老是忘记!!!! success: function (data) { //data是后台传过来的字符串 $.each(JS ...

  10. C++ Notes 1 - size_type - Accelerated Ch3

    1. 为什么用string::size_type而不是int? --Why use string::size_type ? int is supposed to work! it holds numb ...