Vue中的input循環(huán)是一個(gè)常見(jiàn)的問(wèn)題。當(dāng)需要展示多個(gè)input框時(shí)，我們往往需要通過(guò)循環(huán)渲染來(lái)達(dá)到效果。下面我們就來(lái)學(xué)習(xí)如何通過(guò)Vue來(lái)實(shí)現(xiàn)input循環(huán)。
首先我們需要在Vue中定義一個(gè)數(shù)組用來(lái)存儲(chǔ)input的值。下面是Vue實(shí)例中定義的數(shù)組：
data() {
return {
inputVal: []
}
}接下來(lái)我們需要通過(guò)v-for循環(huán)來(lái)渲染input框，并綁定各自的值到data中的inputVal數(shù)組。代碼如下：
< template >< div >< div v-for="(val, index) in inputVal" :key="index">< input type="text" v-model="inputVal[index]"/>
最后，在Vue中添加一個(gè)按鈕，并在按鈕點(diǎn)擊事件中添加一個(gè)input框的值到inputVal數(shù)組中。代碼如下：
< template >< div >< div v-for="(val, index) in inputVal" :key="index">< input type="text" v-model="inputVal[index]"/>