更改数字后,例如,在第一个或第二个输入中,结果为假。只有更改 中的值才能给我正确的结果。
如果我在第一个输入中输入 40,在第二个输入中输入 3,而其他输入我保持不变,则结果应该是 26。
拜托,你能帮帮我吗?
<body>
<div id="app">
<h1>{{title}}</h1>
<form v-on:submit.prevent>
<span>Довжина стіни, м:</span><br>
<input class="length" type="text" name="length" v-model.text.trim="wall_length"><br>
<span>Висота стіни, м:</span><br>
<input class="heigth" type="text" name="heigth" v-model.text.trim="wall_height"><br>
<hr>
<span>Ширина рулона, м:</span><br>
<select v-model="selected">
<option v-for="key in weight" :value="key">{{key}}</option>
</select><br>
<span>Довжина рулона, м:</span><br>
<input class="length_roll" type="text" name="length_roll" v-model.text.trim="length" maxlength="5"><br>
<span>Повтор малюнка (рапорт), см:</span><br>
<input class="rapport" type="text" name="rapport" v-model.text.trim="rapport"><br><br>
<input type="submit" value="Порахувати" v-on:click="calc">
</form>
<span>{{result}} рулонів шпалер</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script>
new Vue({
el : "#app",
data: {
title: "Калькулятор шпалер",
wall_length: 20,
wall_height: 2.75,
weight: [0.53, 1.05],
rapport: 0,
length: 10.05,
selected: 0.53,
polotno_for_room: 0,
polotno_rulon: 0,
result: 0
},
methods: {
calc: function () {
this.polotno_for_room = (this.wall_length + this.wall_height)/ this.selected;
this.polotno_rulon = this.length /(this.wall_height + 0.10);
this.result = Math.ceil(this.polotno_for_room/this.polotno_rulon);
console.log((this.wall_length + this.wall_height)/ this.selected);
console.log(this.polotno_rulon = this.length /(this.wall_height + 0.10));
console.log(Math.ceil(this.polotno_for_room/this.polotno_rulon));
}
}
});
</script>
</body>
您的主要问题是您使用带有 type="text"
的输入。其结果是一个字符串。启动应用程序时,组件的状态将初始化为您设置为数据的状态,从而产生wall_length
和wall_height
数字。更改其中一个输入的那一刻,这些变量的类型将更改为"字符串"。
由于javascript的工作方式,它现在将进行字符串连接而不是添加两个数字。然后它会将其转换回一个数字,以除以任何this.selected
。结果是,您不是将 40 + 3 = 43 除以 this.selected
,而是将 "40" + 3 = 403 除以 this.selected
。请注意我在输入后面添加的typeof
检查以展示这一点。
new Vue({
el: "#app",
data: {
title: "Калькулятор шпалер",
wall_length: 40,
wall_height: 3,
weight: [0.53, 1.05],
rapport: 0,
length: 10.05,
selected: 0.53,
polotno_for_room: 0,
polotno_rulon: 0,
result: 0
},
methods: {
calc: function() {
this.polotno_for_room = (this.wall_length + this.wall_height) / this.selected;
this.polotno_rulon = this.length / (this.wall_height + 0.10);
this.result = Math.ceil(this.polotno_for_room / this.polotno_rulon);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h1>{{title}}</h1>
<form v-on:submit.prevent>
<span>Довжина стіни, м:</span><br>
<input class="length" type="text" name="length" v-model.text.trim="wall_length"> {{ typeof wall_length }}<br>
<span>Висота стіни, м:</span><br>
<input class="heigth" type="text" name="heigth" v-model.text.trim="wall_height"> {{ typeof wall_height }}<br>
<hr>
<span>Ширина рулона, м:</span><br>
<select v-model="selected">
<option v-for="key in weight" :value="key">{{key}}</option>
</select><br>
<span>Довжина рулона, м:</span><br>
<input class="length_roll" type="text" name="length_roll" v-model.text.trim="length" maxlength="5"><br>
<span>Повтор малюнка (рапорт), см:</span><br>
<input class="rapport" type="text" name="rapport" v-model.text.trim="rapport"><br><br>
<input type="submit" value="Порахувати" v-on:click="calc">
</form>
<span>{{result}} рулонів шпалер</span>
</div>
您的选择之一是自由使用parseFloat(..)
。它将确保您在计算中仅使用数字。
new Vue({
el: "#app",
data: {
title: "Калькулятор шпалер",
wall_length: 40,
wall_height: 3,
weight: [0.53, 1.05],
rapport: 0,
length: 10.05,
selected: 0.53,
polotno_for_room: 0,
polotno_rulon: 0,
result: 0
},
methods: {
calc: function() {
this.polotno_for_room = (parseFloat(this.wall_length) + parseFloat(this.wall_height)) / parseFloat(this.selected);
this.polotno_rulon = parseFloat(this.length) / (parseFloat(this.wall_height) + 0.10);
this.result = Math.ceil(parseFloat(this.polotno_for_room) / parseFloat(this.polotno_rulon));
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h1>{{title}}</h1>
<form v-on:submit.prevent>
<span>Довжина стіни, м:</span><br>
<input class="length" type="text" name="length" v-model.text.trim="wall_length"><br>
<span>Висота стіни, м:</span><br>
<input class="heigth" type="text" name="heigth" v-model.text.trim="wall_height"><br>
<hr>
<span>Ширина рулона, м:</span><br>
<select v-model="selected">
<option v-for="key in weight" :value="key">{{key}}</option>
</select><br>
<span>Довжина рулона, м:</span><br>
<input class="length_roll" type="text" name="length_roll" v-model.text.trim="length" maxlength="5"><br>
<span>Повтор малюнка (рапорт), см:</span><br>
<input class="rapport" type="text" name="rapport" v-model.text.trim="rapport"><br><br>
<input type="submit" value="Порахувати" v-on:click="calc">
</form>
<span>{{result}} рулонів шпалер</span>
</div>