我有一個用于檢測已輸入并放入陣列的型別的代碼。代碼以某種方式忽略 if 和 else if 并跳轉到 else 命令
用于輸入型別
<!-- Type Input -->
<select v-model="exType">
<option v-for="option in typeOption"> {{option}} </option>
</select>添加輸入并將其放入陣列
typeOption: ['Income', 'Primer', 'Skunder', 'Tersier'],
},
methods: {
addExpense(exType) {
this.expenseList.unshift({
type: this.exType,
}),
this.exType = '',
},用于檢測型別
getType(type) {
if (type.toLowerCase() == "income") {
this.class = "blue"
return this.class
} else if (type.toLowerCase() == "primer") {
this.class = "green"
return this.class
} else if (type.toLowerCase() == "skunder") {
this.class = "orange"
return this.class
} else {
this.class = "red"
return this.class
}
}和 CSS 類
<style scoped>
.blue{
background-color:#87CEFA;
}
.green{
background-color:#90EE90;
}
.orange{
background-color:#FFA07A;
}
.red{
background-color:#F08080;
}
</style>我一直在撓頭，為什么會發生這種情況
編輯：創建表時呼叫 get 型別
<tbody>
<tr :class="getType(`${expenseList.type}`)" v-for="data in expenseList">
<td> The Data </td>
</tr>
</tbody>當前結果
uj5u.com熱心網友回復：
使用getType(`${expenseList.type}`)中斷反應性。要保存反應性，請使用getType(expenseList.type).
另外，我在這段代碼中看到了問題。在我看來，必須有getType(data.type)。
此外，如果不是真的有必要，您可以通過簡單地回傳所需的結果來擺脫第一個。
getType(type) {
if (type.toLowerCase() == "income") {
return "blue"
} else if (type.toLowerCase() == "primer") {
return "green"
} else if (type.toLowerCase() == "skunder") {
return "orange"
} else {
return "red"
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/393482.html
標籤：javascript html 查询 css Vue.js