vue.js - 将 css 类附加到 vue 应用程序中的 ID

Question

这里是第一次 SO 海报；我在将 css 类附加到具有 ID 的元素时遇到了一些问题；我对类执行此操作的方式是我在 HTML 元素上有一个单击事件，该事件触发一个属性来切换状态，并且该属性返回新类，效果很好。

当这样做并定位一个 ID 时，我不太确定我错过了什么；我可以获得点击事件来切换状态，但我不确定如何将类附加到该元素 ID。我在下面粘贴了codepen；提前谢谢你。

https://codepen.io/KarimPremji/pen/vJYKWB

  <!-- testing ID binding-->
  <div id="excerciseID" @click="turnPink = !turnPink" 
  :class="divClassesPink"></div>
  <br>TurnPink state: {{turnPink}}
  </div>

new Vue({
el: '#app',
  data: {
    turnRed: false,
    turnPink: false
  },
  computed: {
divClassesRed: function(){
  return {
    red: this.turnRed,
    blue: !this.turnRed
  }
},
divClassesPink: function(){
  return {
    pink: this.turnPink,
    blue: !this.turnPink
  }
}
  }})

Answer 1

这不是 Vue 问题，而是 CSS 问题。您的 ID 选择器是 more specific不是一个类，background-color: gray 将是呈现的颜色。

The following list of selector types increases by specificity:

1. Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
3. ID selectors (e.g., #example).

在您的 CSS 中，您有以下规则。

.red{
  background-color: red;
}

.blue{
  background-color: blue;
}

.pink{
  background-color: pink;
}

#excerciseID { // This is the most specific CSS rule
  width: 100px;
  height: 100px;
  background-color: gray; // remove this
  margin: 10px;
  display: inline-block;
}

如果你想切换颜色，那么你应该删除那条线。这是你的 pen updated .