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

Posted 2020-09-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于vue 实现文本域还剩多少字符的主要内容，如果未能解决你的问题，请参考以下文章

vue单选多选，文本域，选择框

Notes 和 Domino 已知限制

文本域输入汉字第二个文本域立即显示汉字的获取首个字母如何用JS实现

EditText常用属性:空白提示/文本域/特殊字符/数字类型/等属性设置

JS调用CSS样式表问题（功能鼠标经过文本域是文本域边框颜色发生变化『给出能够实现功能的源码』）