Vue的input輸入框在進行一些異步操作（比如與服務器進行數據交互）時，我們經常需要給輸入框添加一個“轉圈”的loading效果，以免用戶操作過程中感到等待過長，從而提升用戶體驗。
以下是一個簡單的Vue組件示例，演示了如何通過條件渲染來實現輸入框的loading效果：
Vue.component('my-input', {
data: function() {
return {
isLoading: false,
value: ''
}
},
methods: {
doSomethingAsync: function() {
this.isLoading = true;
setTimeout(function() {
this.isLoading = false;
}.bind(this), 2000);
}
},
template: `Loading...`
})
var app = new Vue({
el: '#app'
})在上述示例中，我們定義了一個名為“my-input”的Vue組件。組件有兩個data屬性：“isLoading”和“value”，分別代表loading狀態和輸入框的值。
我們還定義了一個“doSomethingAsync”方法，模擬了一個異步操作，執行時會將“isLoading”設置為true，表示正在加載，2秒后再將其設置為false。
在組件的模板中，我們加上了一個元素和一個按鈕，通過v-if指令實現了這樣一個邏輯：
- 如果isLoading為false，則顯示按鈕，并為其添加click事件
- 如果isLoading為true，則顯示“Loading...”文本
同時，我們通過:disabled屬性讓輸入框在isLoading為true時變為不可編輯狀態，以防止用戶在異步操作期間進行其他操作。
這樣一來，我們的輸入框在進行異步操作時就會顯示“Loading...”文本，并在按鈕上添加一個loading效果，以提醒用戶操作正在進行中。