当前位置: 首页 > 编程笔记 >

Vue实现动态显示textarea剩余字数

东弘扬
2023-03-14
本文向大家介绍Vue实现动态显示textarea剩余字数,包括了Vue实现动态显示textarea剩余字数的使用技巧和注意事项,需要的朋友参考一下

Vue实现动态显示textarea剩余文字数量,具体内容如下

这里我们假设允许用户输入的最多数量为200个

html代码如下:

<textarea maxlength="200" @input="descInput" v-model="desc" />
<span>{{remnant}}/200</span>

javascript代码如下:

data(){
 return{
 remnant: 200
 }
}

methods:{
 descInput(){
 var txtVal = this.desc.length;
 this.remnant = 200 - txtVal;
 }
}

css代码在这里就不码出来了~

实现效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍基于JS实现textarea中获取动态剩余字数的方法,包括了基于JS实现textarea中获取动态剩余字数的方法的使用技巧和注意事项,需要的朋友参考一下 案例介绍:我们常见到有的网站有textarea文本框,当你输入的时候,下面有文字提示还能输入多少个字,今天就是要实现这个功能。当然,由于一个页面有好几个textarea,所以使用单个js逻辑进行控制是不行的,得小小的进行封装一下。当

  • 本文向大家介绍javascript实现状态栏中文字动态显示的方法,包括了javascript实现状态栏中文字动态显示的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript实现状态栏中文字动态显示的方法。分享给大家供大家参考,具体如下: 希望本文所述对大家JavaScript程序设计有所帮助。

  • 本文向大家介绍Matlab实现数据的动态显示方法,包括了Matlab实现数据的动态显示方法的使用技巧和注意事项,需要的朋友参考一下 对于真实系统或者仿真平台,数据是增量式的产生的。Matlab除了强大的矩阵运算外,还具有强大的数据可视化库。由于静态画图的方法较多,本文只针对增量式数据流的动态显示。本文主要介绍几种Matlab实现数据的动态显示方法。方法主要有两种: hold on set函数与dr

  • 本文向大家介绍vue实现动态数据绑定,包括了vue实现动态数据绑定的使用技巧和注意事项,需要的朋友参考一下 实现的步骤: 1.监听对象属性的读取与变化 Object.defineProperty() 方法会直接在对象上定义一个新的的属性,或者已经存在的属性并且返回这个属性 语法是 Object.defineProperty(obj, prop, descript) obj: 目标对象 prop:

  • 本文向大家介绍基于JS实现数字动态变化显示效果附源码,包括了基于JS实现数字动态变化显示效果附源码的使用技巧和注意事项,需要的朋友参考一下 先给大家展示下效果,感觉不错,可以参考实现代码,文末附有源码哦。 1.目标 以液晶电子表样式,动态变化的在指定元素内显示数字。 目标关键词:动态变化(定时器),指定元素(DOM元素ID),数字(number) 效果:多个页面元素中,均以动态效果显示不同的数字,

  • 问题内容: 给定月份剩余的天数如何找到当月剩余的天数?例如,如果当前月份为11月,而今天为16/11/2016,则月份中的天数``经过的天数=?我想动态地进行操作在我的示例中30′16 = 14 问题答案: 只需使用Datepart函数: