vue动态绑定样式

每次点击方块时通过三元表达式，改变对应的class，每一个不同的class对应不同的样式，从而通过改变class实现样式的切换。

实现代码

<template>
  <div class="container">
    <!--通过三元表达式选择class使用对应的样式-->
    <div
      v-for="item in list"
      :key="item"
      :class="current == item ? 'current' : 'style-test'"
      @click="styleTest(item)"
    ></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      current: "", //代表当前点击的项目
    };
  },
  mounted() {
    //默认点击第一项
    this.styleTest(this.list[0]);
  },
  methods: {
    //点击后改变当前项目
    styleTest(item) {
      this.current = item;
    },
  },
};
</script>
<style scoped>
.container {
  text-align: center;
}
.style-test,
.current {
  /*未点击的项目*/
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: #77b2ec;
  margin: 10px;
  cursor: pointer;
}
.current {
  /*点击的项目*/
  background-color: #41b883;
  box-shadow: 5px 5px 10px white;
}
</style>

vue动态绑定样式

推荐阅读