Vue.js是一款非常流行的JavaScript框架，它的核心特點(diǎn)是輕量級(jí)、高效、易用。其中，Vue-Element-UI是Vue.js中一個(gè)非常實(shí)用的開(kāi)源UI框架，它提供了多種常用的UI組件，其中就包括Input輸入框組件。

對(duì)于Input輸入框組件，它是一個(gè)用戶(hù)輸入數(shù)據(jù)的重要組件。默認(rèn)情況下，輸入框的顯示與隱藏是由屬性控制的，比如使用v-if來(lái)動(dòng)態(tài)控制輸入框的顯示與隱藏。

<el-input v-if="showInput" v-model="inputData" />

在上面的代碼中，我們可以看到，使用v-if控制輸入框的顯示與隱藏，并使用v-model實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。但是，有時(shí)候我們需要?jiǎng)討B(tài)控制輸入框的顯示與隱藏，而又不想刪除或注釋掉該標(biāo)簽。此時(shí)，我們可以使用css樣式實(shí)現(xiàn)元素的隱藏。

<el-input v-show="showInput" v-model="inputData" />
<style scoped>
.el-input {
display: none;
}
</style>

上面的代碼中，我們使用v-show指令來(lái)動(dòng)態(tài)控制輸入框的顯示與隱藏，并使用css樣式將該元素隱藏。

除了使用css樣式外，我們也可以使用v-bind:style指令來(lái)動(dòng)態(tài)控制輸入框的樣式。比如，我們可以通過(guò)判斷一個(gè)變量來(lái)設(shè)置輸入框的display樣式屬性。

<el-input v-bind:style="{display: showInput ? 'block' : 'none'}" v-model="inputData" />

在上面的代碼中，我們使用v-bind:style指令來(lái)動(dòng)態(tài)綁定樣式，并使用三目運(yùn)算符來(lái)判斷輸入框是否需要顯示。

除了以上兩種方式，我們還可以通過(guò)修改元素的class屬性實(shí)現(xiàn)動(dòng)態(tài)控制輸入框的顯示與隱藏。比如，我們可以定義一個(gè)hidden類(lèi)，并在需要隱藏的元素上添加該類(lèi)，從而實(shí)現(xiàn)元素的隱藏。

.hidden {
display: none;
}
<el-input :class="{hidden: !showInput}" v-model="inputData" />

在上面的代碼中，我們定義了一個(gè)hidden類(lèi)，并使用:class綁定該類(lèi)到輸入框上。當(dāng)showInput為false時(shí)，輸入框?qū)㈦[藏。

綜上所述，我們可以通過(guò)css樣式、v-bind:style指令、class屬性等方式來(lái)實(shí)現(xiàn)Vue-Element-UI中輸入框的動(dòng)態(tài)顯示與隱藏。根據(jù)實(shí)際需求，選擇不同的方式可以更加靈活地控制表單元素的顯示與隱藏。