如何使用 v-model 和输入字段隐藏默认值?
Posted
技术标签:
【中文标题】如何使用 v-model 和输入字段隐藏默认值?【英文标题】:How to hide default value with v-model and input fields? 【发布时间】:2021-09-17 03:29:34 【问题描述】:我有一个带有 v-model 的输入字段,在数据中设置了一个变量:
<div class="resource-cost--mat-one">
<h3>Material 1</h3>
<label>Cost <span>(per KG.)</span></label>
<input class="" type="text" v-model="matOneCost">
</div>
<div class="resource-cost--mat-two">
<h3>Material 2</h3>
<label>Cost <span>(per KG.)</span></label>
<input class="" type="text" v-model="matTwoCost">
</div>
<div class="resource-cost--mat-three">
<h3>Material 3</h3>
<label>Cost <span>(per KG.)</span></label>
<input class="" type="text" v-model="matThreeCost">
</div>
<div class="resource-cost--total">
<h4>Total</h4>
<p> totalCost() </p>
</div>
和
data()
return
matOneCost: 0,
matTwoCost: 0,
matThreeCost: 0
,
methods:
totalCost()
let totalCost = parseInt(this.matOneCost) + parseInt(this.matTwoCost) + parseInt(this.matThreeCost)
return totalCost;
默认情况下,输入字段的值为 0,我必须将其删除并键入我实际要输入的值。
我尝试将数据值设置为一个字符串,它确实摆脱了默认值,但是,直到每个字段都有数据,它才会返回 NaN。
我还尝试使用以下输出:
<p> totalCost() || 0 </p>
这也有效,直到我开始输入一个数字,它会再次输出 NaN,直到所有 3 个都被填满。
在幕后,我只想要默认值 0,这样一两个字段就可以在没有第三个字段的情况下填充和计算,也不会自动填充输入字段。
谢谢
【问题讨论】:
【参考方案1】:在计算每个属性时添加条件并使用计算属性而不是方法:
// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue(
el: '#app',
data()
return
matOneCost: 0,
matTwoCost: 0,
matThreeCost: 0
,
computed:
totalCost()
let totalCost = +(this.matOneCost || 0) + (+this.matTwoCost || 0) + (+this.matThreeCost || 0)
return totalCost;
)
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<div class="resource-cost--mat-one">
<h3>Material 1</h3>
<label>Cost <span>(per KG.)</span></label>
<input class="" type="number" v-model="matOneCost">
</div>
<div class="resource-cost--mat-two">
<h3>Material 2</h3>
<label>Cost <span>(per KG.)</span></label>
<input class="" type="number" v-model="matTwoCost">
</div>
<div class="resource-cost--mat-three">
<h3>Material 3</h3>
<label>Cost <span>(per KG.)</span></label>
<input class="" type="number" v-model="matThreeCost">
</div>
<div class="resource-cost--total">
<h4>Total</h4>
<p> totalCost </p>
</div>
</div>
【讨论】:
这对于默认值为零非常有效,但默认情况下输入字段中仍然有一个零......知道如何删除它吗?谢谢! 不客气,您可以通过空字符串''
初始化绑定属性
啊,是的,呃。非常感谢您的帮助:D以上是关于如何使用 v-model 和输入字段隐藏默认值?的主要内容,如果未能解决你的问题,请参考以下文章
SQL如何使用 alter column语句添加字段的默认值(defualt)?