javascript - 是否可以创建一个通过数据绑定(bind)显示的变量实例？

Question

我的函数计算输入中的字符数量。此函数用于多个输入。该函数单独跟踪每个输入的字符数。然而，剩余的字符不会单独跟踪，任何输入的任何字符都计入总数。我怎样才能为 View 中的每个输入单独显示剩余的字符，并且仍然保持我的函数模块化以处理它附加的任何输入？是否可以在每次调用方法时都有一个变量实例？

谢谢!

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;
                    }
            },

Answer 1

我可以提议一个组件吗？

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
    }
  }
})

在你的模板中这样使用:

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

Example .