Vue中的表單是一個非常常見的特性,不過有時候我們希望一些表單項在特定情況下不可編輯,這時候disable就會派上用場。
在Vue中,我們可以使用v-bind指令以及computed屬性來實現表單項的disable狀態。
<template>
<div>
<input type="text" v-model="inputValue" :disabled="isDisabled">
<button v-on:click="toggleDisabled">Toggle Disable</button>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: "",
isDisabled: true
};
},
computed: {
toggleDisabled() {
return this.isDisabled = !this.isDisabled;
}
}
};
</script>
在上面的代碼中,我們首先在data對象中定義了一個isDisabled的狀態值,初始為true,然后在input標簽上使用了v-bind指令關聯了isDisabled的狀態值,使得當isDisabled為true時該input標簽不可編輯。
接下來,在computed屬性中定義了一個toggleDisabled函數,使得每次點擊button標簽時都會將isDisabled的狀態值取反,達到動態禁用該input標簽的效果。
至此,我們通過v-bind指令和computed屬性實現了Vue表單項的disable狀態。
上一篇python 找列函數
下一篇python 退出任務