javascript - null 之后将值设置为零

Question

我在 null 之后显示零值时遇到问题。

null 不会显示在输入中，但是如果我将值更改为 0，它也不会出现...也许我做错了什么？也许有人遇到过这个问题，有办法解决这个问题吗？ 在第一个输入中，我希望出现 0。

new Vue({
	el : '#app',
	data() {
		return {
			value : null,
			valueString: null,
		};
	},
	components: {
		VueAutonumeric,
	},
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/autonumeric@4.5.7/dist/autoNumeric.min.js"></script>
<script src="https://unpkg.com/vue-autonumeric@1.2.6/dist/vue-autonumeric.min.js"></script>

<div class="container">
	<div id="app">
		
		<p>Value is {{value}}</p><br>
		<vue-autonumeric :options="''" v-model="value"></vue-autonumeric>
		<button @click="() => value = 0">Set Zero</button>
		
		<p>ValueStrign is {{valueString}}</p><br>
		<vue-autonumeric :options="''" v-model="valueString"></vue-autonumeric>
		<button @click="() => valueString = '0'">Set '0'</button>
		
	</div>
</div>

已通过将值设置为“0”来解决此问题...但我认为这不好。

Answer 1

您可以使用后备系统

通过这种方式，您可以为变量指定默认值:

data() {
  return {
    value : null || 0,
    valueString: null || "0",
  };
}

如果您不想更改变量的值，请在插值时进行更改:

<p>Value is {{value || 0}}</p>
<p>ValueStrign is {{valueString || "0"}}</p>

更多信息请参见:
JavaScript Variable fallback
How to display space instead undefined and null in vue.js template?