点击当前 li 元素 该元素变为选中状态，其他 li 为未选中状态

Question

现有一个已知数据源 listData， 使用vue语法，根据此数据源在 ul 标签中遍历生成 li 标签。 并实现:点击当前 li 元素 该元素变为选中状态，其他 li 为未选中状态.

 

代码片段

<template>

  <div>

    <ul>

        

    <ul>

  </div>

</template>

<script>

const listData = [

  {

    id:1,

    name: '123'

  },

  {

    id:2,

    name: '456'

  },

  {

    id:3,

    name: '789'

  }

]

​export default {

data () {

  return {

 

  }

}

}

</script>

 

Answer 1

写一个事件 点击的时候将当前点击的下标保存起来 然后将对应下标的li改为选中的类

<template>
  <div class="hello">
    <div>
      <ul>
        <li
          v-for="(item, index) of listData"
          :class="{ active: active == index }"
          @click="setIndex(index)"
          :key="index"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      listData: [
        {
          id: 1,

          name: "123",
        },

        {
          id: 2,

          name: "456",
        },

        {
          id: 3,

          name: "789",
        },
      ],
      active: "",
    };
  },
  methods: {
    setIndex(index) {
      this.active = index;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.active {
  color: #f00;
}
</style>