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=" ...
随机推荐
- golang搭建web服务器
一个最简单的golang web服务器 package main import ( "net/http" "fmt" ) func sayHelloWorld( ...
- moment常用操作
1.返回当前日期截止时的时间戳: post.createtime = moment().unix(); let stime = moment(moment.unix(moment().unix()). ...
- 【Hadoop系列】linux SSH原理解析
本文中斜体加粗代表shell指令,操作环境 CentOS6.5 linux root免密码登录链接:[Hadoop系列]linux下 root用户免密码登录远程主机 ssh. linux 非root用 ...
- unity3d之实现各种滑动效果
一. 点击滑动页面 新建了一个带mask的prefab,加上代码只需要将图片prefab.按钮prefab和所想添加的图片 拖进去会自动生成按钮,滑动速度可以随意调time,滑动效果用itween实现 ...
- svn 文件后面显示时间和提交人
1.在eclipse中选择window-->preferences,然后选择下图中的位置,就可以显示你想要的东西的了,在此记下以备后用
- maven父子项目
maven搭建父子项目 1.先建立一个父项目,建立项目的时候,选择 Create a simple project 点击 next,填写以下信息 点击finish就可以了. 2.接下来要建立一个子项 ...
- js-js和HTML的两种结合方式
第一种: - 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种: - 使用script标 ...
- (转)快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...
- git 命令收藏
git init # 初始化本地git仓库(创建新仓库) git config --global user.name "xxx" # 配置用户名 git config -- ...
- 关于webstorm启动后闪退
总是提示内存不足,就把内容该成了2048 在启动时候就闪退,无法进去编辑器 找到安装目录下的bin文件夹打开找到WebStorm.exe.vmoptions文件打开 把下面选项设置为 -Xmx1024 ...