<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. golang搭建web服务器

    一个最简单的golang web服务器 package main import ( "net/http" "fmt" ) func sayHelloWorld( ...

  2. moment常用操作

    1.返回当前日期截止时的时间戳: post.createtime = moment().unix(); let stime = moment(moment.unix(moment().unix()). ...

  3. 【Hadoop系列】linux SSH原理解析

    本文中斜体加粗代表shell指令,操作环境 CentOS6.5 linux root免密码登录链接:[Hadoop系列]linux下 root用户免密码登录远程主机 ssh. linux 非root用 ...

  4. unity3d之实现各种滑动效果

    一. 点击滑动页面 新建了一个带mask的prefab,加上代码只需要将图片prefab.按钮prefab和所想添加的图片 拖进去会自动生成按钮,滑动速度可以随意调time,滑动效果用itween实现 ...

  5. svn 文件后面显示时间和提交人

    1.在eclipse中选择window-->preferences,然后选择下图中的位置,就可以显示你想要的东西的了,在此记下以备后用

  6. maven父子项目

    maven搭建父子项目 1.先建立一个父项目,建立项目的时候,选择  Create a simple project 点击 next,填写以下信息 点击finish就可以了. 2.接下来要建立一个子项 ...

  7. js-js和HTML的两种结合方式

    第一种: - 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种: - 使用script标 ...

  8. (转)快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  9. git 命令收藏

    git init # 初始化本地git仓库(创建新仓库)   git config --global user.name "xxx" # 配置用户名   git config -- ...

  10. 关于webstorm启动后闪退

    总是提示内存不足,就把内容该成了2048 在启动时候就闪退,无法进去编辑器 找到安装目录下的bin文件夹打开找到WebStorm.exe.vmoptions文件打开 把下面选项设置为 -Xmx1024 ...