vue 实现文本域还剩多少字符

<!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>
时间: 2024-10-13 02:40:54

vue 实现文本域还剩多少字符的相关文章

Android 中自定义控件之判断还剩多少可输入字符的EditText

最近做的项目有个需求就是判断一下还 剩多少字符可输入,也就是对EditText 的文本变化做监听 ,功能实现了,但是感觉使用组合方式,每次都要编写,还不如写一个自定义控件来备用.在查看本文时,建议先行参考本人转载的一篇文章:http://blog.csdn.net/android_jiangjun/article/details/39580253 下面进入本文的正题: 首先大家先看一下效果图吧: 本文自定义的控件采用的是组合控件的方式来自定义控件,自定义控件的布局如下 <RelativeLayo

文本域

一.关于textarea元素的cols和rows属性 <textarea>元素,俗称“文本域”,或者“多行文本框”,其自带原生的HTML属性rows表示行的意思,可以改变<textarea>的可视区域高度,cols表示列,可以改变<textarea>的可视区域宽度.例如: <textarea></textarea> <textarea cols="30" rows="5"></textar

vue 将elementui 表单内文本域的文本进行处理让文本保存换行空格形式,传递给后端

// 在表单提交信息内新增content,为最终参数this.ruleForm.content = this.preText(this.ruleForm.desc) // 将文本域的文本进行处理让文本保存换行空格形式,传递给后端preText (pretext) { return pretext.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ')} 原文地址:https://www.cnblog

Welcome to Swift (苹果官方Swift文档初译与注解十九)---123~132页(第二章..本章节还剩6页)

Working with Characters (与字符相关) 在Swift中,String类型表示一组有序字符的值.每个字符都是一个Unicode符号.可以使用for-in循环来遍历字符串中的每个字符: for character in "Dog!??" {   println(character) } // D // o // g // ! // ?? 在Swift中也可以使用Character类型来显式的创建一个单字符的常量或者变量: let yenSign: Character

jquery 文本域光标操作(选、添、删、取)

一.JQuery扩展 ; (function ($) { /* * 文本域光标操作(选.添.删.取)的jQuery扩展 http://www.cnblogs.com/phpyangbo/p/5528648.html */ $.fn.extend({ /* * 获取光标所在位置 */ iGetFieldPos: function () { var field = this.get(0); if (document.selection) { //IE $(this).focus(); var sel

asp.net 微信企业号办公系统-表单设计-文本域

点击工具栏上的 文本域 按钮可弹出文本域属性设置: 绑定字段:与数据表的某个字段绑定. 默认值:文本域初始值. 最大字符数:文本域可输入的最大字符数. 宽度:文本域的宽度,如:200px,80%. 高度:文本域的高度,如:200px. 值类型:输入的值的类型. 事件:同文本框.

在Word指定位置插入富文本域值(html文本)

遇到此问题,首先想到的就是各种百度.结果度娘了一会并没有发现有用的有效的解决方法,哎,看来还得靠自己啊. 首先整理了下手头上的资源,一是HtmlAgilityPack,专门解析Html文本用的:二是我有ASPOSE.Word. 再整理下思路:在Word中插入Html,首先有一点是肯定的,Word跟Html都是Document结构,这点应该是没啥怀疑的.如此的话就感觉好办多了,无非就是Document上插入几个节点,在Html插入节点的方式完全可以运用到此地方. 那么第一种解决方法就是:首先把Wo

文本域长度限制

今儿个给表单的标签加长度限制,一路 input="type" maxlength="**" 下来很顺.这时杀出个textarea,来也给你加个maxlength. 不过textarea对我说:"哥我没这属性,您看给换个吧..."  没办法,(现在我使用的FireFox15.0.1.Chrome25.0.1364.160支持此属性)既然没这属性那咱就换吧,用事件来控制. 网上查了下,用于监控文本域内容变可以用onchange.onpropertyc

富文本域数据保存到数据库

前言:<富文本域数据保存到数据库>,这个标题感觉还不够清晰明了.只好再赘述一遍了,前端使用了bootstrap的wysiwyg富文本组件,然后就是不知道怎么保存图片,图片数据提交到数据库后,在前端无法显示. 今天看到jquery.base64.js,隐隐约约知道了解决方案. 经常不经意间就发现文章被扣到各式各样的网站上面,甚是可恶! 那么人生何处不爬虫,爬虫请标http://blog.csdn.net/qing_gee 见贤思齐焉,见不贤而内自省也! 普通做法 function html_en