时间戳

首页 > 解决方案 > Vue.js 中的实用方法

javascript - Vue.js 中的实用方法

问题描述

我正在尝试在 Vue.js 中创建一个实用程序方法来验证来自任何输入字段的十进制数，但我不确定如何在内部设置 Vue.js 中的值。

这是我之前在 jQuery 中所做的：

$('body').on('blur', '.decimal', function() {
    var val = $(this).val();
    if ($.isNumeric(val)) {
        val = parseFloat(val).toFixed(2);
        $(this).val(val);
    } else {
        $(this).val('');
    }
});

这就是我在 Vue 中所拥有的，但该值并未在内部存储并被覆盖。

function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

methods: {
    validateDecimal: function (e) {
        var val = e.target.value;

        if (isNumeric(val)) {
            e.target.value = parseFloat(val).toFixed(2);
        } else {
            e.target.value = '';
        }
    }
}

HTML

<input class="ui-input" :value="some.value" placeholder="0.00" @blur="validateDecimal">
<input class="ui-input" :value="some.othervalue" placeholder="0.00" @blur="validateDecimal">
<input class="ui-input" :value="another.dynamic.input" placeholder="0.00" @blur="validateDecimal">

标签： javascriptvue.jsvuejs2

解决方案

显然你可以像这样将数据对象引用传递给处理程序方法：（注意你不能只传递数据属性，因为我不相信它会是一个引用。）

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    inputs:{
      'v1':{
        value:'1.256'
      },
      'v2':{
        value:'1.521'
      }
    },
    someInput:{value:'1.7125'}
  },
  methods:{
    validateDecimal: function (o,p,e) {
        console.log('validateDecimal',o);
        var val = e.target.value;
        console.log(val);
        if (Number(parseFloat(val)) == val) {
            val = parseFloat(val).toFixed(2);
            this.$set(o, p, val);
        } else {
            this.$set(o, p, '');
            e.target.value = '';
        }
    },
    foo: function(){
      console.log(this.inputs.v1.value)
      console.log(this.inputs.v2.value)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="i,key in this.inputs">
    <input class="ui-input" :value="i.value" placeholder="0.00" @blur="validateDecimal(i, 'value', $event)">
  </div>
  <div>
    <input class="ui-input" :value="this.someInput.value" placeholder="0.00" @blur="validateDecimal(someInput,'value', $event)">
  </div>
  <button @click="foo">Click</button>
</div>

由 OP 编辑​​：为属性名称添加一个额外的参数，并$set用于使动态属性具有反应性。这应该使该方法对于具有任何属性名称的任何动态输入字段更通用。

推荐阅读