首页 > 解决方案 > 在 null 之后将值设置为零

问题描述

之后显示零值时出现问题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”,已通过解决方法解决了这个问题......但我认为这不好。

标签: javascriptvue.jsautonumeric.js

解决方案


您可以使用后备系统

通过这种方式,您可以为变量提供默认值:

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

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

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

更多信息在这里:
JavaScript 变量回退
如何在 vue.js 模板中显示空间而不是 undefined 和 null?


推荐阅读