Question

我是vueJS的新手。我的监视清单很长。都是一样的但是我不知道如何将它们转换为功能方式。

它们都是用于在输入标签和v-model中添加逗号的。效果很好。但是这些代码看起来很笨，因为它们完全相同，但名称却不一样。

new Vue({
  data: {
    tmp_price1: '',
    tmp_price2: '',
    tmp_price3: '',
    tmp_a_price: '',
    tmp_b_price: '',
  },

  watch: {
   tmp_price1: function(newValue) {
     if (newValue != '') {
       const result = newValue.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
       Vue.nextTick(() => this.tmp_price1 = result);
     }
   },
   tmp_price2: function(newValue) {
     if (newValue != '') {
       const result = newValue.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
       Vue.nextTick(() => this.tmp_price2 = result);
     }
   },

  ....(repeat)

  },

请帮助我改进这些哑码的有效方式。

Answer 1

这似乎是过度工程，但我可能会制造一个组件来封装令人讨厌的行为。该组件将在其中计算出一个可设置的表，该表将为父级发出用于更新的公共值。

new Vue({
  el: '#app',
  data: {
    tmp_price1: '',
    tmp_price2: '',
    tmp_price3: '',
    tmp_a_price: '',
    tmp_b_price: '',
  },
  components: {
    commafiedInput: {
      props: ['value'],
      template: '<input v-model="commaValue">',
      computed: {
        commaValue: {
          get() {
            return this.value;
          },
          set(newValue) {
            this.$emit('input', this.addCommas(newValue));
          }
        }
      },
      methods: {
        addCommas(v) {
          return v.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
      }
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div> {{tmp_price1}}
    <commafied-input v-model="tmp_price1"></commafied-input>
  </div>
  <commafied-input v-model="tmp_price2"></commafied-input>
  <commafied-input v-model="tmp_price3"></commafied-input>
  <commafied-input v-model="tmp_a_price"></commafied-input>
  <commafied-input v-model="tmp_b_price"></commafied-input>
</div>

Answer 2

只需使用简单的过滤器即可显示值的格式版本：

new Vue({
  el: '#app',
  data: {
    tmp_price1: '123123',
    tmp_price2: '',
    tmp_price3: ''
  },
  filters: {
    myFilter(v) {
      return v.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }   
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div><input v-model="tmp_price1">{{tmp_price1 | myFilter}}</div>
  <div><input v-model="tmp_price2">{{tmp_price2 | myFilter}}</div>
  <div><input v-model="tmp_price3">{{tmp_price3 | myFilter}}</div>
  
</div>

...但是这对于输入字段是不够的；您不能只将过滤器置于v-model属性上。 Roy J's answer中所述的子组件可能是处理该问题的最好，最可重用的方法，但是如果您认为某些事情有点麻烦而又没问题（但也没问题脏），您可以在问题上抛出变更处理程序：

new Vue({
  el: '#app',
  data: {
    tmp_price1: '123123',
    tmp_price2: '',
    tmp_price3: ''
  },
  methods: {
    myFormatter(fieldname) {
      /* replace the user's input with the formatted value.
      
          There's probably some clever way to read the v-model 
          name from the input field instead of passing it to the 
          method as a string, but I'm not going to mess around 
          with that for what is after all a quick-and-dirty technique */
      this[fieldname] = this[fieldname].replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
  },
  mounted() {
    // if the initial values aren't always empty, you'll need to run the
    // formatter function on component load as well as on user input:
    ['tmp_price1', 'tmp_price2', 'tmp_price3'].forEach(f => {
      this.myFormatter(f);
    });
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div><input v-model="tmp_price1" @input="myFormatter('tmp_price1')">{{tmp_price1}}</div>
  <div><input v-model="tmp_price2" @input="myFormatter('tmp_price2')">{{tmp_price2}}</div>
  <div><input v-model="tmp_price3" @input="myFormatter('tmp_price3')">{{tmp_price3}}</div>
</div>

（或作为另一个变体，对类似问题的this answer使用基本上相同的技术，但将其包装在Vue指令中以绑定输入事件，而不是附加@input处理程序。）

请注意，在“过滤器”版本中，v-model值保留为原始用户输入；过滤器仅影响显示的值。在第二个示例中，格式本身应用于v-model值，因此，如果将这些值传递到其他位置，则将获得格式化的版本。根据情况，这两种技术都可能有用。（或者甚至可以结合使用它们-例如，删除v模型中的非数字，然后通过仅用于显示的过滤器添加逗号。）

如何在VueJS中将一长串“手表”转换为功能性方法？

2 个答案: