<!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. FarPoint自动换行

    单元格自动换行 FarPoint.Win.Spread.CellType.TextCellType mType = new FarPoint.Win.Spread.CellType.TextCellT ...

  2. visual studio 2015下python编程的中文字符串问题

    visual studio 2015强大的编程功能,编写起python来也是非常方便的,但其对中文字符的支持不是很好,经常发生莫名其妙的错误,最常见的错误是不报错,也不执行代码. 代码简单如下: x= ...

  3. [置顶] Netty学习总结（1）——Netty入门介绍

    1．Netty是什么? Netty是一个基于JAVA NIO类库的异步通信框架,它的架构特点是:异步非阻塞.基于事件驱动.高性能.高可靠性和高可定制性. 2．使用Netty能够做什么? 开发异步.非阻 ...

  4. G4Studio+extjs+highcharts 下在ext4j的panel中放入hightCharts图表

    在G4Studio+extjs下.创建一个panel,然后将highCharts图表放入panel中.实现方法例如以下: 首先简单给出的部分代码: Ext.onReady(function() { v ...

  5. [Mobx] Using mobx to isolate a React component state

    React is great for diffing between Virtual-DOM and rendering it to the dom. It also offers a naïve s ...

  6. layer是什么

    layer是什么 总结 layer就是一个web弹框 简介 layer是一款web弹层组件,致力于服务各个水平段的开发人员. 可以让你想到即可做到的web弹窗 概述 [1]  layer,一个可以让你 ...

  7. centos7 更改网络后 无法重启network （解决办法）

    今天由于用nat与本地局域网冲突,可能和之前ENSP搭建时虚拟机冲突造成 然后修改了VMnet8的ip,网关,DNS 同时更改虚拟网络编译器与VMnet8保持相同 进入虚拟机,更改/etc/sysco ...

  8. Sequences of sequences

    I have focused on lists of tuples, but almost all the examples in this chapter also work with lists ...

  9. fullpage中大的图片超过一屏怎么在手机端滑动显示？

    fullpage中大的图片超过一屏怎么在手机端滑动显示?(设置overflow电脑端是会出现滚动条的,但是在手机端不出现滚动条,图片也不可左右滑动显示) var $window = $(window) ...

  10. hive parquet table 配置使用压缩

    创建parquet table : create table mytable(a int,b int) STORED AS PARQUET; 创建带压缩的parquet table: create t ...