Vue的input指令在應用中的表單提交時非常常用，然而在輸入框聚焦時的動作卻不同。當輸入框聚焦時，輸入框上下文具有css類，可以通過此類添加焦點的樣式。

<input v-on:focus="onFocus" />
new Vue({
methods: {
onFocus: function (event) {
event.target.classList.add('focused');
}
}
})

在此實施的代碼中，輸入框具有一個指向onFocus方法的v-on:focus指令，該方法在輸入框具有焦點時被調用，并將焦點類添加到輸入框上。要移除焦點時，可以使用類的toggle方法，如下所示：

<input v-on:focus="onFocus" v-on:blur="onBlur" />
new Vue({
methods: {
onFocus: function (event) {
event.target.classList.add('focused');
},
onBlur: function (event) {
event.target.classList.toggle('focused');
}
}
})

在此代碼中添加了一個v-on:blur指令，該指令在輸入框失去焦點時被調用，將焦點類從輸入框上刪除。如上所示，Vue input指令可以通過使用CSS類輕松地控制輸入框等元素的外觀。