<!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. 紫书 习题 8-2 UVa 1610 （暴力出奇迹）

    这道题我真的想的非常的复杂, 拿草稿纸一直在找规律,推公式, 然后总有一些特殊的情况. 然后就WA了N次.无奈之下看了别人的博客, 然后就惊了.直接暴力枚举两个相邻字符串 里面的所有可能就可以了--真 ...

  2. C语言中头文件尖括号和引号的区别

    用include 引用头文件时,双引号和尖括号的区别: 1.双引号:引用非标准库的头文件,编译器首先在程序源文件所在目录查找,如果未找到,则去系统默认目录查找,通常用于引用用户自定义的头文件. 2.尖 ...

  3. 2015 Multi-University Training Contest 4 hdu 5336 XYZ and Drops

    XYZ and Drops Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tot ...

  4. 洛谷 P2926 [USACO08DEC]拍头Patting Heads

    P2926 [USACO08DEC]拍头Patting Heads 题目描述 It's Bessie's birthday and time for party games! Bessie has i ...

  5. BZOJ 1088 水模拟

    BZOJ水一道~ 枚举前两个位置是否放雷,模拟向下推.能够则ans++ #include "stdio.h" #include "string.h" int a ...

  6. swift入门-实现简单的登录界面

    // // AppDelegate.swift // UIWindow import UIKit @UIApplicationMain class AppDelegate: UIResponder, ...

  7. 捕捉到来自宇宙深空的神奇X-射线信号

    请看下图: 这是专门用于捕捉X-射线信号的航天望远镜,约有5吨重,执行轨道距离地面大约有5万多公里.6月24日,美国宇航局NASA宣布,这台航天望远镜从银河系深处捕捉到一种波长非常特殊的神奇X-射线信 ...

  8. bzoj1934: [Shoi2007]Vote 善意的投票(显然最小割)

    1934: [Shoi2007]Vote 善意的投票 题目:传送门 题解: 明显的不能再明显的最小割... st连同意的,不同意的连ed 朋友之间两两连边(即双向边) 流量都为1... 为啥: 一个人 ...

  9. hdoj--1312--Red and Black（dfs）

    Red and Black Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  10. Random words

    To choose a random word from the histogram, the simplest algorithm is to build a list with multiple ...