如何在VUE中實現條件類別綁定

Question

是否可以使用 Vue 建立條件來根據 doom 上載入的文字變更新增類別？

我有一個有顏色名稱的清單

<span>yellow</span>
<span>red</span>
<span>grey</span>

我想設定一個條件，例如如果名稱文字是黃色我想添加類別“color_yellow”等等

Answer 1

嘗試像下面的程式碼片段：

new Vue({
  el: '#demo',
  data() {
    return {
      colors: ['yellow', 'red', 'grey']
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

.color_yellow {
  color: yellow;
}
.color_red {
  color: red;
}
.color_grey {
  color: grey;
}

sssccc

  

    

      {{ color }}