Article From:https://segmentfault.com/q/1010000011131152
Question:

How to judge the color of each group according to the following button? For example, the red display on the bottom of the double row key group shows the black in the electric piano group.

Answer 0:

Initialize the items, set the corresponding class for the item you need, and use the playPar style without uniform.

Answer 1:

<span :class=”item.TypeGroupName===’Electric piano ‘?’ black style ‘:’ >
<span :class=”item.TypeGroupName===’Double row keys’? ‘red style’: ‘>

Answer 2:

Judging from every item in your Li cycle, use V-Class or V-style.
For example, on div, bind class = {‘red’: item.name = = “double row key”,’green’: item.name = = “electronic organ”}.
Then the two classes are defined in CSS;

Answer 3:

itemAdd a ID, such as 0,1,2
<span :class=”item.id===0? ‘a’: ”>
<span :class=”item.id===1? ‘b’: ”>
Later, if item.TypeGroupName changes, it doesn’t matter.

Answer 4:

A clumsy approach
<ul id=”app”>

<li v-for="x in list" :style="{color:listcolor[x]}">111111111</li>

</ul>
<script type=”text/javascript”>

    var vm = new Vue({
  el: '#app',
  data: {
      list:[1,2,3,4],
      listcolor:{"1":"red",
      "2":"blue",
      "3":"green",
      "4":"yellow"
  }
  }
})

</script>

Answer 5:

For example:

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Refer to Vue documents: class and styles binding

Answer 6:

Add class names. Or the data- attribute.

Answer 7:

Is it possible to use CSS directly?

  .listItem:nth-child(1) .playPar {
             background-color: #f00;
         }
        .listItem:nth-child(2) .playPar {
            background-color: #000;
        }
        .listItem:nth-child(3) .playPar {
            background-color: #0f0;
        }
        .listItem:nth-child(4) .playPar {
            background-color: #0ff;
        }

perhaps
<li v-for=”(item, index) in items”>
Setting the style based on index

Leave a Reply

Your email address will not be published. Required fields are marked *