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

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

代码片段

<div>

<ul>

</div>

</template>

const listData = [

{

id:1,

{

id:2,

{

id:3,

}

]

export default {

data () {

return {

}

</script>

写一个事件点击的时候将当前点击的下标保存起来然后将对应下标的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>

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
	.sd {
		background-color: #ccf;
	}
	
</style>
</head>
<body>
<div id="app">
	<ul v-for="obj in listData">
		<li :class="{sd: sdid==obj.id}" @click="sdid=obj.id">{{obj.id}} {{obj.name}}</li>
	</ul>
</div>

<script type="text/javascript">

const listData = [
  {
    id:1,
    name: '123'
  },
  {
    id:2,
    name: '456'
  },
  {
    id:3,
    name: '789'
  }
]


var app = new Vue({
	el: '#app',
	data() {
		return {
			listData: listData,
			sdid: 1
		}
	}
});
</script>

</body>
</html>

定义一个当前li的index属性 currli，用动态class绑定 :class="currli == index？'选中的样式class':'未选中的样式class ' "

v-for遍历listData，得到<li>标签

用动态改变类的方式来实现

可先定义一个选中状态时的类

根据其点击选中的li，传入其对应的索引值（索引值的获取是通过用v-for循环li时得到对应的index）

在改变类的时候，通过传过来的索引值和当前选中的索引值做一个比较，即:class="current === li.index ? "选中状态的类"："未选中状态的类" ，其中current值要在data中定义初始化为1

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

写了两个文件，一个组件文件，一个引用文件，用到了css框架stylus。

组件文件selectList.vue

<template>
  <div id="select_list">
    <ul>
      <li v-for="(item,index) in list" :key="item.id ? item.id : index"
       :class="item.id == selectId ? 'li_item_selected' :''" @click="selectItem(item)">
       {{item.name}}
       </li>
    <ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      selectId: -1
    }
  },
  methods: {
    selectItem (item) {
      this.selectId = item.id
      this.$emit('getItem', item)
    }
  }

}
</script>
<style lang="stylus" scoped>
#select_list{
  ul{
    li{
      background #fff
    }
    .li_item_selected{
      background #ff5722
    }
  }
}
</style>

引用文件：components.vue

<template>
  <div id="test">
      <div class="select_list">
          <selectList :list="list" @getItem='getItem'></selectList>
      </div>
  </div>
</template>

<script>
import selectList from '../components/selectList'
export default {
  components: {
    selectList
  },
  data () {
    return {
      list: [
        {
          id: 1,
          name: '诸葛'
        },
        {
          id: 2,
          name: '司马'
        },
        {
          id: 3,
          name: '欧阳'
        }
      ]
    }
  },
  methods: {
    getItem (item) {
      alert('你点击了' + item.name)
    }
  }
}
</script>

<style lang="stylus" scoped>
#test{
    height 600px
    display flex
    justify-content center
    align-items center
    flex-wrap wrap
    .select_list{
        width 600px
    }
}
</style>

实际效果：

刚敲得，哈哈

<template>

  <div>

    <ul>

        <li v-for="(i,item)in listData" :key="item.id" :class="active==i?'选中状态的类名':'未选中的类名'" @click="ActiveItem(i)">{{item.id}}</li>

    <ul>

  </div>

</template>

<script>
export default {
data () {
  return {
     active:-1,
     listData:[

  {
    id:1,

    name: '123'

  },

  {
    id:2,

    name: '456'

  },

  {
    id:3,

    name: '789'

  }

]

  }

},
methods:{
ActiveItem(i){
    this.active = i;
    }
}

}

</script>

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y

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

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