Vue中提供了很多有用的組件和工具，其中之一就是input組件。input組件可以輕松創(chuàng)建各種表單元素。在這篇文章中，我們將探討Vue input的常見用法。

首先，我們來創(chuàng)建一個簡單的input組件：

<template>
<div>
<input v-model="message">
<p>你輸入的是：{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ""
};
}
};
</script>

在上面的代碼中，我們創(chuàng)建了一個input元素，并綁定了一個v-model指令。v-model指令會將input元素的值綁定到data中的message屬性上。同時(shí)，在p標(biāo)簽中我們使用了{(lán){}}語法將message值顯示在模板中。

接下來，我們來創(chuàng)建一個帶有數(shù)據(jù)校驗(yàn)的input組件：

<template>
<div>
<input v-model="message" @input="validateInput">
<p v-if="error" style="color: red;">{{ errorMessage }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "",
error: false,
errorMessage: ""
};
},
methods: {
validateInput() {
if (!/^\d{6}$/.test(this.message)) {
this.error = true;
this.errorMessage = "請輸入6位數(shù)字";
} else {
this.error = false;
this.errorMessage = "";
}
}
}
};
</script>

在上面的代碼中，我們使用了@input指令來監(jiān)聽input元素的輸入事件。當(dāng)用戶輸入時(shí)，我們會調(diào)用validateInput方法來進(jìn)行數(shù)據(jù)校驗(yàn)。如果輸入的數(shù)據(jù)不符合規(guī)定，我們將error屬性設(shè)為true，并顯示一個錯誤信息。否則，我們將error屬性設(shè)為false，并清空錯誤信息。

以上就是Vue input的簡單使用。我們可以根據(jù)需要使用v-model指令和事件監(jiān)聽進(jìn)行數(shù)據(jù)綁定和數(shù)據(jù)校驗(yàn)。