Question

我有两个单独的states：一个array和一个string。单击其中一个元素后，它得到一个类highlight并变为selected。如何显示selected：来自array或string的项目。

在这种情况下：我希望能够选择（单击后添加班级突出显示）第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>

从两个单独的状态中选择一个选项

1 个答案: