鍍金池/ 問(wèn)答/HTML5  HTML/ el-input類型為number時(shí),綁定的值為0不顯示?

el-input類型為number時(shí),綁定的值為0不顯示?

問(wèn)題:使用elementUI的el-input框如何使綁定的數(shù)據(jù)初始值為0時(shí)也能正常顯示?

使用elementUI時(shí)發(fā)現(xiàn)el-input為number類型時(shí),綁定的值初始值為0,竟然不顯示,如圖:
clipboard.png

雖然輸入框中沒(méi)有顯示值,但從數(shù)據(jù)里可以看出,數(shù)據(jù)的類型為number,值為0。
當(dāng)值被手動(dòng)改為0時(shí),此時(shí)能正常顯示。
如果將el-input換成普通的input,可以正常顯示,就是調(diào)樣式有點(diǎn)麻煩。

使用el-input,綁定的數(shù)據(jù)為字符串0時(shí),可以顯示,但是不想對(duì)初始值的類型做手腳。

然而在官網(wǎng)例子中發(fā)現(xiàn),初始值為0時(shí)也能正常顯示???

clipboard.png

html

<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/element-ui@2.2.2/lib/index.js"></script>
<div id="app">
<el-input v-model="input" type="number"></el-input>
</div>

js

var Main = {
  data() {
    return {
      input: 0
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

我用的版本是2.3.4,官網(wǎng)例子為2.4.5和2.2.2時(shí)都能正常顯示。
還有發(fā)現(xiàn),即使el-input的類型是text,綁定的數(shù)據(jù)初始值為0,也不會(huì)顯示,字符串0就正常。
懵了,求解疑

回答
編輯回答
情殺

<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>

使用el-input-number

2018年2月13日 17:59
編輯回答
心上人

剛好就是因?yàn)榘姹镜膯?wèn)題,2.3.5修復(fù)的這個(gè)問(wèn)題如圖所示

個(gè)人建議更新到最新的2.4.X,因?yàn)樵?.4.0版本,input-number新增了 precision 屬性,能對(duì)精度進(jìn)行限制,要方便不少
2.3.3版本

2.3.4版本

2.3.5版本

2018年4月28日 22:33