根据此数据源在 ul 标签中遍历生成 li 标签。 并实现:点击当前 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

<template>
  <div class="">
    <ul>
      <li
        :class="[curId == item.id ? 'active' : '']"
        v-for="item in ulData"
        :key="item.id"
        @click="select(item)"
      >
        {{ item.id }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      curId: -1,
      ulData: [
        {
          id: 1,
          name: "1",
        },
        {
          id: 2,
          name: "12",
        },
        {
          id: 3,
          name: "123",
        },
        {
          id: 4,
          name: "1234",
        },
      ],
    };
  },
  methods: {
      select(item){
        this.curId = item.id;
      }
  },
  computed: {},
  watch: {},
  mounted() {},
};
</script>

<style scoped lang='scss'>
ul {
  li {
    display: block;
    color: #051433;
    &.active {
      color: red;
    }
  }
}
</style>

Answer 2

很简单啊，做一个激活key就好了

<template>
  <div>
    <ul>
       <li
          v-for=“item in list”
          :key=“item.id”
          :class=“item.id===activeKey&&’active’”
          @click=“handleClick(item.id)”
       >
          {{ item.name }}
       </li>
    <ul>
  </div>
</template>
<script>
const listData = [
  {
    id:1,
    name: '123'
  },
  {
    id:2,
    name: '456'
  },
  {
    id:3,
    name: '789'
  }
]
​export default {
    data () {
         return {
            list:listData,
            activeKey:null
         }
    },
    methods:{ 
       // 点击修改激活key
       handleClick(id){
          this.activeKey = id
       }
    }
}
</script>
<style>
  .active {
     color:red;
  }
</style>

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。