javascript - 从两个不同的状态中选择一个选项

Question

我有两个独立的状态:一个数组和一个字符串。单击其中一个元素后，它会获得一个类highlight并成为selected。如何显示选定的:数组或字符串中的项目。

在本例中:我希望能够选择(单击后添加类突出显示)第 6 段。

这是一个fiddle .

var items = []
for (var i = 1; i <= 5; i++) {
  items.push({
    id: i
  })
}
new Vue({
  el: "#app",
  data: {
    items,
    selected: undefined,
  },
  methods: {}
})

li.highlight {
  background: yellow;
}

p,
h1 {
  margin-top: 20px;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <ul>
    <li v-for="item in items" :class="{highlight:item == selected}" @click="selected = item">{{item.id}}</li>
  </ul>
  <p>6</p>

  <h1>Selected item: {{ this.selected }}</h1>
</div>

Answer 1

我希望您在单击时也希望显示 6 ...如果是这样，您可以在单击时分配相同的数据类型，如 {id: 6} 。

var items = []
for (var i = 1; i <= 5; i++) {
  items.push({
    id: i
  })
}
new Vue({
  el: "#app",
  data: {
    items,
    selected: undefined,
  },
  methods: {}
})

.highlight {
  background: yellow;
}

p,
h1 {
  margin-top: 20px;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <ul>
    <li v-for="item in items" :class="{highlight:item == selected}" @click="selected = item">{{item.id}}</li>
  </ul>
  <p :class="{highlight: selected && selected.id === 6}" @click="selected = {id: 6}">6</p>

  <h1>Selected item: {{ this.selected }}</h1>
</div>