时间戳

首页 > 解决方案 > 输入空给0

vue.js - 输入空给0

问题描述

希望你能帮助我。我希望如果输入仍然为空，则为其分配一个值 0。在加载我的模式时，该值为 0，如果我的输入聚焦，则删除 0。如果我转到下一个输入，我不希望任何输入保持为空

onFocus() {
    this.efectivo = '';
},
onFocus1() {
    this.tarjeta = '';
},

<td style="background-color: #CEECF5">
  <input name="txtd" @focus="onFocus1" v-bind:min="0" v-model="tarjeta" type="number">
</td>
<td style="background-color: #CEECF5">
  <input name="txte" @focus="onFocus2" v-bind:min="0" v-model="vales" type="number">
</td>

我的 2 个输入

使用数字键盘书写时，0 保留在开头

标签： vue.js

解决方案

如文档中所述，每当您想使用手表时，请考虑使用 acomputed代替：

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  data: () => ({
    t: 0
  }),
  computed: {
    test: {
      get() {
        return Number(this.t)
      },
      set(val) {
        this.t = Number(val) || 0
      }
    }
  },
  methods: {
    onBlur() {
      this.$refs.test.value = this.test
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<div id="app">
  <input v-model="test"
         type="number"
         min="0"
         max="100"
         placeholder="0"
         ref="test"
         @blur="onBlur" />
  <pre v-html="{test}" />
</div>

以上遵循 Store 模式（一个事实来源），其中data充当计算属性的本地存储。
如果您使用 Vuex，您应该（显然）test从存储中读取值并在 setter 中提交突变。
如果你没有使用 Vuex 但仍想导出你的dataprop 以便外部组件可以对其更改做出反应，你可以使用闪亮的 new Vue.observable()，添加在v2.6：

Vue.config.devtools = false;
Vue.config.productionTip = false;

const store = Vue.observable({ test: 0 });

new Vue({
  el: '#app',
  computed: {
    test: {
      get() {
        return Number(store.test)
      },
      set(val) {
        store.test = Number(val) || 0
      }
    }
  },
  methods: {
    onBlur() {
      this.$refs.test.value = this.test
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<div id="app">
  <input v-model="test"
         type="number"
         min="0"
         max="100"
         placeholder="0"
         ref="test"
         @blur="onBlur" />
  <pre v-html="{test}" />
</div>

现在您的storeconst 可以存在于不同的文件中，可以导入/导出，并且您可以通过在computed属性中使用它来监听任何其他组件中的更改。

推荐阅读