簡言

有的時候，我們想在vue模板中直接使用枚舉類型的值，來做一些判斷。

ts枚舉

枚舉允許開發(fā)人員定義一組命名常量。使用枚舉可以更容易地記錄意圖，或創(chuàng)建一組不同的情況。TypeScript 提供了基于數(shù)字和字符串的枚舉。
枚舉的定義這里不說了，都知道是使用enum關(guān)鍵詞創(chuàng)建的，用來表示一組不同值的數(shù)據(jù)。
例如：一個審核狀態(tài)有審核中、審核失敗、審核成功等狀態(tài)，這個使用就可以使用枚舉來表示這些審核狀態(tài)。

enum Status {pending,	//	等待 0fail,	//	失敗 1success,	//成功 2	
}

ts文件中使用

在ts文件中，我們可以使用這個枚舉類型，可以當(dāng)作類型來約束其他變量，也可以直接調(diào)用枚舉中的某項值來使用。

enum Status {pending,	//	等待 0fail,	//	失敗 1success,	//成功 2	
}
const status:Status = 0if(status === Status.fail){
console.log('fail')
}

vue模板文件中使用

vue文件模板中不能像ts中那樣直接使用枚舉，你需要將枚舉類型賦值到vue文件的data里面。

使用一個響應(yīng)式變量轉(zhuǎn)接之后，我們打印下就會發(fā)現(xiàn)這個變量的值：

這樣我們使用這個響應(yīng)式變量就能達到和枚舉相同的結(jié)果。

如果你使用的是組合式（帶setup的），就不需要這樣，可以直接在模板中使用枚舉類型

結(jié)語

結(jié)束了。