Vue点击切换样式

先看效果图

这里直接是上代码

<template>
  <ul>
    <li :class="[index == status  ? 'bechoice' : '']" v-for="(item,index) in list" :key="index" @click="choice(index)">
        {{item.text}}
    </li>
  </ul>
</template>

<script>
export default {
  name: "Recharge",
  data() {
    return {
      status: 0,
      list: [
        { text: "热点" },
        { text: "政治" },
        { text: "娱乐" },
        { text: "新闻" },
        { text: "军事" },
        { text: "体育" }
      ]
    };
  },
  methods: {
    choice(index) {
      this.status = index;
    }
  }
};
</script>

<style scoped>
ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
}
li {
  width: 200px;
  height: 30px;
  background: #eeeeee;
  color: #000;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px;
}
.bechoice {
  background: red;
  color: #eeeeee;
}
</style>

注意事项：这里必须要用for循环取到索引

最后

以上就是个性短靴为你收集整理的Vue点击切换样式的全部内容，希望文章能够帮你解决Vue点击切换样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。