<!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. python 模块一览

    一个模块可以对应一个文件 同一个模块,可以import多次,但只会被导入一次 模块的导入顺序 导入模块写在文件最上面 自己写的和内置的以及扩展的分开 顺序:内置,扩展,自己写的 按字母大小写排序 一行 ...

  2. Maven项目的坐标GroupId和ArtifactId

    GroupId和ArtifactId被统称为“坐标”是为了保证项目唯一性而提出的,如果你要把你项目弄到maven本地仓库去,你想要找到你的项目就必须根据这两个id去查找.       GroupId一 ...

  3. hadoop-17-hive数据库元数据查看

    hadoop-17-hive数据库元数据查看 存在本地的mysql中: user001用户中 : > mysql -uhive -phive mysql> use hive; mysql& ...

  4. 【cocos2d-x 3.7 飞机大战】 决战南海I (二) 我方飞机的实现

    在上一篇中.我们实现了游戏的開始界面,接下来要实现游戏的主界面.主界面包括地图.我方飞机.敌机等 先来实现我方飞机 我方飞机具有哪些属性呢? 飞机要具有生命值.要有动画效果(尾部喷气),飞机不可以飞出 ...

  5. Hello World FastCGI

    什么是FastCGI,google吧,測试一个用C++实现的FastCGI程序. 1, Nginx 安装.http://nginx.org/en/download.html.下载解压.configur ...

  6. iOS_第3方类库_側滑选项卡SlideSwitchView

    终于效果: 用法: 1.在主控制器中创建一个[SlideSwitchView]的对象实例,并用成员变量记住,如_slideSwitchView,并加入到self.view 2.设置[_slideSwi ...

  7. Win32++:可替代MFC的Windows桌面应用开发框架

    写在前面 有过Win32编程经验的朋友都知道,使用Windows提供的API开发桌面应用是相当繁琐的,创建一个功能简单能接收并处理消息的窗口至少也得几百行代码.创建一个可视化的窗口一般要以下几个步骤: ...

  8. Hello World基于.net framework中CLR的执行

    static void Main(string[] args) { Console.WriteLine("Hello,World!"); Console.WriteLine(&qu ...

  9. UI Framework-1: Browser Window

    Browser Window The Chromium browser window is represented by several objects, some of which are incl ...

  10. Linux-CentOS5/6启动流程

    Linux-CentOS5/6启动流程