Vue 2.0中的input組件是我們在開發中經常使用的一種表單組件。在Vue 2.0中,我們可以通過v-model指令來進行輸入數據的雙向綁定。
<template>
<div>
<input type="text" v-model="message">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>
上面的代碼中,我們在input元素中使用v-model綁定了data中的message變量,這樣輸入框中輸入的值將會同步到message中。而message在p標簽中展示,因此輸入框中的值也會同步展示在p標簽中。
除了雙向綁定外,input組件在Vue 2.0中還有很多其他的選項和屬性。例如,我們可以通過type屬性來指定input的類型,如下所示:
<template>
<div>
<input type="number" v-model="age">
<p>{{ age }}</p>
</div>
</template>
<script>
export default {
data() {
return {
age: ''
}
}
}
</script>
上面的代碼中,我們將type屬性指定為number,這樣輸入框中只允許輸入數字,并且數據類型會自動轉換為數字類型。
除了type屬性外,input組件還支持placeholder、disabled、readonly、required等屬性,可以通過這些屬性來控制輸入框的顯示和行為。
綜上所述,Vue 2.0中的input組件是一個非常常用的基本組件,通過v-model指令和各種屬性可以輕松地實現表單的功能。