vue 实现文本域还剩多少字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="app">
<template v-for="(item,index) in msg">
<textarea :maxlength ="checkLength(index)" v-model="item.name" cols="30" rows="10" ></textarea>
<span v-if="index == 1">还可以输入{{10- result[index]}}字符</span>
</template>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:[
{"name":""},
{"name":""},
{"name":""}
]
},
methods:{
checkLength:function(index){
return index <= 1 ? 10: ''
}
},
computed:{
result:function(){
var l = 0;
var arr = [];
var reg = /^[\s]$/g;
for(var i=0; i<this.msg.length; i++){
l = (this.msg[i].name).toString().replace(/\s/g,"").length;
arr.push(l);
}
return arr;
}
}
})
</script>
</body>
</html>
vue 实现文本域还剩多少字符的更多相关文章
- vue中文本域限制字数的方法
用watch方法,来限制字数 <template> <div class="box"> <textarea v-model="title&q ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- vue 富文本编辑器 项目实战用法
1.挑个富文本编辑器 首先针对自己项目的类型,确定自己要用啥编辑器. 1.1 wangeditor 如果一般类似博客这种项目不需要花里胡哨的,功能也不要求贼多的,推荐一下wangeditor(点击跳转 ...
- jquery 文本域光标操作（选、添、删、取）
一.JQuery扩展 ; (function ($) { /* * 文本域光标操作(选.添.删.取)的jQuery扩展 http://www.cnblogs.com/phpyangbo/p/55286 ...
- JavaScript：文本域事件处理
文本域往往可以输入大量的文字信息,但是在文本域上有一些键盘的处理事件:onkeydown.onkeypress.onkeyup. 范例一:观察文本域的键盘事件处理 代码如下: 效果图如下: 默认状态: ...
- palacehoder的自定义样式【输入框input /文本域textarea】
7.palacehoder的自定义样式[输入框input /文本域textarea] 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和texta ...
- vue+富文本编辑器UEditor
vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor.tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享 ...
- textarea 字体限制，超出部分不显示并及时显示还剩字体个数
1)HTML <textarea class="box" ></textarea > 2)JQ: $(function(){ $(".box&qu ...
- input标签（文本域和文件域）
单行文本域: <form> <input type="text" name="..." ....../> </form> 属 ...
随机推荐
- 洛谷P5160 WD与循环
我们看这段代码 int cnt = 0; for (int a_1 = 0; a_1 <= m; a_1++) { for (int a_2 = 0; a_1 + a_2 <= m; a_ ...
- 题解 UVA12206 【Stammering Aliens】
终于A了这道题啊(坑啊) 教练说:这道题不能用map吧,复杂度不一个O(nlogn)吗 于是我就一直想不出来,然后看题解代码,一看就是map... 所以我就在想,那复杂度是不是也不是O(nlogn)呢 ...
- 我的Android进阶之旅------>怎样将Activity变为半透明的对话框？
我的Android进阶之旅------>怎样将Activity变为半透明的对话框?能够从两个方面来考虑:对话框和半透明. 在定义Activity时指定Theme.Dialog主题就能够将Acti ...
- leetcode笔记：Merge Sorted Array
一.题目描写叙述 二.解题技巧 这道题不存在复杂的分析过程和边界条件.假设单纯得考虑从小到大地将两个数组进行合并的话.每次在num1中插入一个数的话,须要将后面的元素都向后移动一位.这样.整个处理过程 ...
- 广东省知名P2P平台资料
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYXNrYmFpNjY2ODg4/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- 在 Win8.1 上安装 Dedup
install-package Microsoft-Windows-ServerCore-FullServer-Package~31bf3856ad364e35~amd64~~6.3.9600.163 ...
- 一站式学习WireShark
一 基础 http://blog.sina.com.cn/s/blog_987e00020102x5k1.html 选中一个数据包,右键选中某一个数据包,然后follow-->Tcp Strea ...
- centos通过yum安装jdk
安装之前先检查一下系统有没有自带open-jdk 命令: rpm -qa |grep java rpm -qa |grep jdk rpm -qa |grep gcj 如果没有输入信息表示没有安装. ...
- NodeJS学习笔记 (19)进阶调试-debugger(ok)
写在前面 谈到node断点调试,目前主要有三种方式,通过node内置调试工具.通过IDE(如vscode).通过node-inspector,三者本质上差不多.本文着重点在于介绍 如何在本地通过nod ...
- 参考《深度学习之PyTorch实战计算机视觉》PDF
计算机视觉.自然语言处理和语音识别是目前深度学习领域很热门的三大应用方向. 计算机视觉学习,推荐阅读<深度学习之PyTorch实战计算机视觉>.学到人工智能的基础概念及Python 编程技 ...