Javascript 是否可以创建'；正在使用数据绑定显示什么？

My函数统计输入中的字符数。此功能用于多个输入。该函数分别跟踪每个输入的字符数。但是，其余字符不单独记录，也不记录任何字符的输入总数。如何在视图中分别显示每个输入的剩余字符，并保持功能模块化以处理附加到它的任何输入？是否有可能在每次调用该方法时都有一个变量实例

谢谢

HTML
    <textarea 
        class="form-control" v-model="HighlightTitle" id="HighlightTitle" v-
        on:keyup="inputCheck">
    </textarea>

    <span>Character Count: {{ charactersRemaining }}</span>

    <textarea class="form-control" v-model="HighlightListing" 
              v-on:keyup="inputCheck" id="HighlightListing">
    </textarea>

    <span>Character Count: {{ charactersRemaining }}</span>     

Javascript

    inputCheck(element)  {

            var characterCount = element.target.value.length;
            var charactersRemaining = '';
            var maxCharacters = 500;

                charactersRemaining = maxCharacters - characterCount;

                this.charactersRemaining = charactersRemaining;

                    if(charactersRemaining < 0) {   
                         this.isOver500 = 1; 
                    }
                    else {
                        this.isOver500 = 0;
                    }
            },

HTML
字符计数：{{charactersRemaining}
字符计数：{{charactersRemaining}
Javascript
输入检查（元素）{
var characterCount=element.target.value.length；
变量字符保留=“”；
var最大字符数=500；
CharactersMaining=maxCharacters—characterCount；
this.charactersRemaining=charactersRemaining；
如果（字符保持<0）{
此值为0.500=1；
}
否则{
该值为0.isOver500=0；
}
},

我可以提议一个组件吗

Vue.component("counted-textarea", {
  props:["maxCharacters", "rows", "value"],
  template: `
    <div>
      <textarea v-model='taValue' :rows='rows' @input='$emit("input", taValue)'></textarea>
      <span :class="{overMax: isOverMax}">Character Count: {{ remaining }}</span>
    </div>`,
  data(){
    return {
      taValue: this.value
    }
  },
  computed:{
    isOverMax(){
      if (!this.taValue)
        return false;

      return (this.maxCharacters - this.taValue.length) < 0
    },
    remaining(){
      if (!this.taValue)
        return this.maxCharacters;

      return this.maxCharacters - this.taValue.length
    }
  }
})

Vue.component（“counted textarea”{
道具：[“最大字符”、“行”、“值”]，
模板：`
字符计数：{{剩余}
`,
数据（）{
返回{
taValue:this.value
}
},
计算：{
isOverMax（）{
如果（！this.taValue）
返回false；
返回（this.maxCharacters-this.taValue.length）<0
},
剩余（）{
如果（！this.taValue）
返回此.maxCharacters；
返回this.maxCharacters-this.taValue.length
}
}
})

在模板中使用如下方式：

<counted-textarea 
             :max-characters="50"
             rows="5"
             v-model="myTextValue">
</counted-textarea>

---

.

是否专门为输入名称创建新的vue文件？新的Vue（{el:#app]，数据：{text1:null，text2:null}}）@pyreal你是什么意思？像是

输入

与

文本区

的不同组件吗？对不起，我误读了最后一部分。看起来您只是在父类中创建数据对象，以便我们可以将v模型附加到它们。对吗？您通常是在Vue中工作时，还是在需要重用时，将每个区域分解为一个组件？@Pyreal是的，我编写了它，这样您就可以在这些区域上使用

v-model

，就像在任何其他输入中一样。至于你的问题，要看情况而定。在这种情况下，您希望将一些数据限定到特定的输入，因此编写组件是一个简单的选择。在Vue2中，编写一个应用程序非常简单。您似乎非常喜欢Vue，您知道有哪些资源可以帮助我进一步了解如何组织应用程序吗？