<!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. 12个Unity5中优化VR 应用的技巧

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50176429 作者:car ...

  2. Solr4.10.2集成Nutch1.9与自带UI界面使用

    Solr4.10.2集成Nutch1.9与自带UI界面使用 一.Solr4.10.2与Nutch1.9集成 环境:Solr4.10.2已经配置在Tomcat上 Solr的Tomcat配置详见Solr4 ...

  3. Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessException总结

    最新项目中遇到了 Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.Proces ...

  4. Hdoj 1176 免费馅饼 【动态规划】

    免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  5. JNI之——&#39;cl&#39; 不是内部或外部命令,也不是可执行的程序或批处理文件

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46604315 问题的出现:     今天卸载了VS2010,重装vs2008后.发 ...

  6. PermissionError: [Errno 13] in python

    出现该错误,首先尝试以管理员身份运行 cmd.exe 程序,然后关闭所有的与 python 相关的进程. 1. open 打开一个文件夹(目录),而不是文件 这一错误一般发生在使用 open函数对文件 ...

  7. HBase框架基础（三）

    * HBase框架基础(三) 本节我们继续讨论HBase的一些开发常识,以及HBase与其他框架协调使用的方式.在开始之前,为了框架之间更好的适配,以及复习之前HBase的配置操作,请使用cdh版本的 ...

  8. jqueryValidator自定义校验规则的一种方式（不覆盖源码）

    1.封装自定义验证方法-validate-methods.js /***************************************************************** j ...

  9. codeforces 501 B Misha and Changing Handles 【map】

    题意:给出n个名字变化,问一个名字最后变成了什么名字 先用map顺着做的,后来不对, 发现别人是将变化后的那个名字当成键值来做的,最后输出的时候先输出second,再输出first 写一下样例就好理解 ...

  10. ES6学习笔记（十二）异步解决方案Promise

    1.Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了P ...