<!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 实现文本域还剩多少字符的更多相关文章

  1. vue中文本域限制字数的方法

    用watch方法,来限制字数 <template> <div class="box"> <textarea v-model="title&q ...

  2. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  3. vue 富文本编辑器 项目实战用法

    1.挑个富文本编辑器 首先针对自己项目的类型,确定自己要用啥编辑器. 1.1 wangeditor 如果一般类似博客这种项目不需要花里胡哨的,功能也不要求贼多的,推荐一下wangeditor(点击跳转 ...

  4. jquery 文本域光标操作（选、添、删、取）

    一.JQuery扩展 ; (function ($) { /* * 文本域光标操作(选.添.删.取)的jQuery扩展 http://www.cnblogs.com/phpyangbo/p/55286 ...

  5. JavaScript：文本域事件处理

    文本域往往可以输入大量的文字信息,但是在文本域上有一些键盘的处理事件:onkeydown.onkeypress.onkeyup. 范例一:观察文本域的键盘事件处理 代码如下: 效果图如下: 默认状态: ...

  6. palacehoder的自定义样式【输入框input /文本域textarea】

    7.palacehoder的自定义样式[输入框input /文本域textarea] 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和texta ...

  7. vue+富文本编辑器UEditor

    vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor.tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享 ...

  8. textarea 字体限制，超出部分不显示并及时显示还剩字体个数

    1)HTML <textarea class="box" ></textarea > 2)JQ: $(function(){ $(".box&qu ...

  9. input标签（文本域和文件域）

    单行文本域: <form> <input type="text" name="..." ....../> </form> 属 ...

随机推荐

  1. 《Craking the Coding interview》python实现---01

    ###题目:给定一个字符串,判断其中是否有重复字母###思路:将重复的字符放入到list中,并进行计数统计###实现:伪代码.函数.类实现###伪代码:string=s #给定的字符串list=[] ...

  2. debug和release的区别

    Debug和Release,主要是针对其面向的目标不同的而进行区分的.Debug通常称为调试版本,通过一系列编译选项的配合,编译的结果通常包含调试信息,而且不做任何优化,以为开发人员提供强大的应用程序 ...

  3. word break相关问题的解法

    https://leetcode.com/problems/word-break/?tab=Description 以及 https://leetcode.com/problems/concatena ...

  4. Linux Shell脚本编程学习笔记和实战

    http://www.1987.name/141.html shell基础 终端打印.算术运算.经常使用变量 Linux下搜索指定文件夹下特定字符串并高亮显示匹配关键词 从键盘或文件里获取标准输入 [ ...

  5. HDU 2222 Keywords Search（AC自己主动机模板题）

    题意:给出一个字符串和若干个模板,求出在文本串中出现的模板个数. 思路:由于有可能有反复的模板,trie树权值记录每一个模板出现的次数就可以. #include<cstdio> #incl ...

  6. 【android】解决Viewpager设置高度为wrap_content无效的方法

    今天发现设置viewpager高度为wrap_content时并没作用.stackoverflow给出了解决方式,就是自己定义viewpager,重写onMesure()方法: public clas ...

  7. 基于机器学习的web异常检测——基于HMM的状态序列建模，将原始数据转化为状态机表示，然后求解概率判断异常与否

    基于机器学习的web异常检测 from: https://jaq.alibaba.com/community/art/show?articleid=746 Web防火墙是信息安全的第一道防线.随着网络 ...

  8. 可以通过shadowserver来查看开放的mdns（用以反射放大攻击）——中国的在 https://mdns.shadowserver.org/workstation/index.html

    Open mDNS Scanning Project 来自:https://mdns.shadowserver.org/ If you are looking at this page, then m ...

  9. java9新特性-10-语法改进：UnderScore(下划线)使用的限制

    1.使用说明 在java 8 中,标识符可以独立使用“_”来命名:   但是,在java 9 中规定“_”不再可以单独命名标识符了,如果使用,会报错:    

  10. 页面出现AXURE RP EXTENSION，怎么办？

    (可参考百度经验,地址:https://jingyan.baidu.com/article/54b6b9c0c1cb762d583b4706.html) 本文以强大如斯的谷歌浏览器来说明,怎么查看Ax ...